Question

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

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

这是没有验证的DEMO选项（放入jsfiddle太多了）

我遇到的麻烦是，如果用户选择了所有三个选项，由于表单无效，我的提交将无效，因为未填写本地号码。即使未显示家庭电话号码输入，也会在我的验证规则中将其设置为required: true

我尝试在标记中添加和删除属性，但是工作正常，但它正在根据选择进行验证。

例如，如果用户选择选项3 - 需要归属编号，则需要js validate。如果用户选择全部三个，则选项1＆amp; 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
          },

jQuery .validate（）|必填问题

1 个答案: