jQuery validate - 根据用户选择设置条件规则

Question

是否可以使用jQuery验证轻松设置条件规则,

简单地说,我正在尝试添加一些逻辑,如果勾选复选框"A",则必须填写字段"A",如果复选框"B"已完成,则必须填写字段"B1"和"B2".

例如,如果选中名为"paypal"的复选框,则必须填写名为"paypal_address"的字段.

我现有的逻辑如下:

<script type="text/javascript">
$(document).ready(function () {

$('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        },
        address_1: {
            minlength: 2,
            required: true
        },
        address_2: {
            minlength: 2,
            required: true
        },
        post_code: {
            minlength: 2,
            required: true
        },            
        email: {
            required: true,
            email: true
        },
        terms: {
          required: true,
        }
    },
    errorPlacement: function(error, element) { 
      element.addClass('error');
    },        
    highlight: function (element) {
        $(element).addClass('nonvalid')
          .closest('.form-group').removeClass('error');
    },
    success: function (element) {
        //element.addClass('valid')
          //.closest('.form-group').removeClass('error');
          element.remove('error');
    }
});

UPDATE

使用Rohit下面的方法,我几乎完全正常工作..我的表格有三个复选框(只能选择一个)1.Paypal 2.银行3.支票/支票

如果选中Paypal(默认情况下是这样),则只需要'paypal_email_address'字段,如果选中了Bank,则需要'account_number'和'sort_code'字段,最后如果选中Check,则需要'check_payable_field'.

//到目前为止我有这个$(".payMethod").on("click",function(){var payment_method = $(this).val();

  if (payment_method == 'paypal') {
    paypal_checked = true;
  } else if (payment_method == 'bank-transfer') {
    bank_checked = true;
    paypal_checked = false;
  } else if (payment_method == 'cheque') {
    cheque_checked = true;
    paypal_checked = false;
  }

});

Answer 1

jQuery Validate实际上直接支持使用依赖表达式.

您需要做的就是更改您的验证选项,如下所示:

$('#myform').validate({
    rules: {
        fieldA: {
           required:'#checkA:checked'
        }
    }
});

而已!

Answer 2

您可以使用自定义验证方法.例如:

jQuery.validator.addMethod("checkA", function(value, element) {
    return YourValidationCode; // return true if field is ok or should be ignored
}, "Please complete A");

然后在你的规则中使用它:

rules: {
    ....
    field_a: {
        required: false,
        checkA: true
    },
    ....
}

看看:http: //jqueryvalidation.org/jQuery.validator.addMethod/