jQuery .validate() |要求的问题

Question

我正在创建一个需要验证手机号码和家庭号码的表单。

表单的工作方式是，如果用户仅选择最后一个选项，则会显示家庭号码。如果他们选择所有三个，则只需要移动设备，如果他们只选择选项 1 和 2，则相同。

这是一个DEMO 的选项，没有经过验证（放入 jsfiddle 太多了）

我遇到的麻烦是，如果用户选择了所有三个选项，由于未填写家庭号码，表格无效，我的提交将无法正常工作。即使没有显示家庭号码输入，它在我的验证规则中设置为required: true

我尝试在标记中添加和删除属性，但效果很好，但它正在根据选择进行验证以执行相同的操作。

例如，如果用户选择选项 3 - 需要家庭号码，则需要 js 验证。 如果用户自己选择所有三个选项 1 和 2 或选项 1 或 2，则不需要家庭号码，不需要 js 验证。

这是我的验证代码：

$j(self.formID).validate({
        debug: self.debug,
        onclick: false,
        onfocusout: false,
        ignore: ".ignore", // Forces override of hidden elements!
        rules: {
         'Oi_TNXZOWkSwgQjRc95mjg' : { /* First Name */
            required: true
          }, 
          'n4JLI3V4FEqxrgjRc95nvA' : { /* Last Name */
              required: true
          },
          '48r6KevWQkGNIgjRc95owg' : { /* mobile phone number */
            required: true,
            digits: true,
            minlength: 9,
            maxlength: 14
          },
          '4iO6Mosk_kyq8QjRc95qFQ' : { /* home phone number */
            required: true,
            digits: true,
            minlength: 9,
            maxlength: 14
          },
          'TQG9r0MSCEqNcgjPWNA-sA' : { /* Region */
              requiredSelect: true
          },
          't9Cn1rKcn0KhqQjRc95t-A' : { /* Terms and conditions */
              required: true
          }
        }

  });
};

这是我添加和删除属性的代码：

showHomeNumber: function() {

        var homeNumber = $j('.home-number'),
            homeRequired = $j('.home-number').find('input'),
            fixedPlan = $j('.fixed'),
            mobileNumber = $j('.mobile-number'),
            planOptions = $j('.account-options li');

        planOptions.on('click', function(e){
            e.preventDefault();
            //If all three are selected show mobile, hide home
            if( $j('.active').length > 1) {
                mobileNumber.show();
                homeNumber.hide();
                homeRequired.removeAttr('required');
            } else if ( fixedPlan.hasClass('active') ) {
                //If select Fixed show only home 
                homeNumber.toggleClass('home-number-active');
                homeNumber.show();
                //Add Required attribute for validation
                homeRequired.prop('required', true);
                mobileNumber.hide();
                //If select last option only, hide mobile
                mobileNumber.toggleClass('mobile-number-inactive');
            } else {
                homeNumber.hide();
                //Remove required attribute for validation
                homeRequired.removeAttr('required');
                mobileNumber.show();
            }
        });

    }

Answer 1

解决方案是这样的！必需：'#idorname:visible'

'48r6KevWQkGNIgjRc95owg' : { /* mobile phone number */
            required: '48r6KevWQkGNIgjRc95owg:visible',
            digits: true,
            minlength: 9,
            maxlength: 14
          },
          '4iO6Mosk_kyq8QjRc95qFQ' : { /* home phone number */
            required: '4iO6Mosk_kyq8QjRc95qFQ:visible',
            digits: true,
            minlength: 9,
            maxlength: 14
          },