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

ccrfmcuu 于 2022-11-29 发布在 jQuery

关注(0)|答案(5)|浏览(246)

是否可以使用jQueryvalidate轻松设置条件规则，
简单地说，我试图添加一些逻辑说，如果复选框'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');
    }
});

更新
使用下面的方法从Rohit我几乎得到了这个完美的工作。.我的形式有三个复选框（只有一个可以选择）1.贝宝2.银行3.支票/支票
如果勾选了Paypal（默认情况下是），则只需要填写“Paypal_email_address”字段，如果勾选了银行，则需要填写“account_number”和“sort_code”字段，最后，如果勾选了支票，则需要填写“check_payable_field”。
//我已经得到了这个到目前为止$（“.paymentMethod”）.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;
  }

}）;

jquery

来源：https://stackoverflow.com/questions/19543354/jquery-validate-set-conditional-rules-based-on-user-selection

5条答案

按热度按时间

nqwrtyyt1#

jQuery Validate实际上使用dependency expressions直接支持这一点。
您需要做的就是更改验证选项，如下所示：

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

就是这样！

赞(0）回复(0）举报 2022-11-29

von4xj4u2#

您可以使用自定义验证方法。例如：

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/

赞(0）回复(0）举报 2022-11-29

enxuqcxy3#

jQuery使用条件作为函数结果进行验证（添加到赖利上面注解中）：

$("#Form_Id").validate({
    rules: {
        CompletedBy: "required", //straight forward validation of field
        Contact_No: "required",
        Location: { required: noTableRow }//if no table row, make Location mandatory
    }        
});

//checks whether a table row exists
function noTableRow() {
  return $("tr.tr_class").length == 0;
}

赞(0）回复(0）举报 2022-11-29

a8jjtwal4#

编辑：我一开始没有正确理解这个问题，我为此道歉：P但是，这里有一个解决方案，应该工作。
你可以做的是检查是否复选框被选中，然后设置所需的规则paypal_address如下：

var checked = false;
 $( "#paypalCheckbox" ).on( "click", function() {
      checked = $('#paypalCheckbox').is(':checked');
  });

然后在规则中添加：

paypal_address : {
 required: checked
 }

赞(0）回复(0）举报 2022-11-29

72qzrwbm5#

类似于@Gorsky给出的答案，但是您可以简单地将其作为函数，而不是注册一个新的验证方法。

rules: {
....
field_a: {
    required: function() {
      // return true or false depending on whether it's required or not
      return $('input[name="radioA"]:checked').val() == 1;
    }
},
....
}

赞(0）回复(0）举报 2022-11-29

我来回答

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

5条答案

相关问题

热门标签

最新问答