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

IT技术 javascript jquery jquery-validate
2021-02-24 20:06:50

是否可以使用 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');
    }
});

更新

使用下面来自 Rohit 的方法，我几乎完美地完成了这项工作.. 我的表单有三个复选框（只能选择一个） 1. Paypal 2. 银行 3. 支票/支票

如果选中 Paypal（默认情况下），则只需要“paypal_email_address”字段，如果选中银行，则需要“account_number”和“sort_code”字段，最后如果选中 Check，则需要“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;
  }

});

4个回答

jQuery Validate 实际上直接支持这一点，使用依赖表达式。

您需要做的就是像这样更改验证选项：

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

而已！

嗯，这如何与选择选项下拉菜单一起使用？？？如果特定下拉列表有值，我需要一个必需的
2021-05-04 20:06:50
@SarojSasmal 是的 - 请参阅答案中的文档链接，最后一个示例就是您要问的
2021-05-11 20:06:50
是否可以在所需部分调用函数并根据条件将其评估为真或假？例如 required: checkCondition()
2021-05-12 20:06:50
非常感谢你的链接。现在我知道有一个选择器：已填充
2021-05-13 20:06:50
如果我们使用远程规则手段，那么这将行不通。它将只检查所需的属性，但远程将像正常流程一样工作。
2021-05-16 20:06:50

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

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/

编辑：一开始我没有正确理解这个问题，我为此道歉：P 但是，这里有一个应该有效的解决方案。

您可以做的是检查复选框是否被选中，然后为 paypal_address 设置所需的规则，如下所示：

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

然后在规则中你可以添加：

 paypal_address : {
 required: checked
 }
嗨，伙计 - 我的验证工作正常 - 我想要做的是根据用户选择的内容制定额外的规则。例如，如果用户选中“paypal”复选框，则需要填写名为“paypal_address”的字段。如果他们不选择此项，则他们可以跳过此字段而无需向 paypal_address 字段添加有效的电子邮件地址。
2021-05-01 20:06:50
他正在使用 jQuery 验证器，您创建方法，而无需创建 onClick() 事件，因为 validate() 将处理一切
2021-05-04 20:06:50

jQuery 使用条件作为函数结果进行验证（添加到上面 Ryley 的评论中）：

$("#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;
}
其它你可能感兴趣的问题
上一篇如何在 react-native 中使用 FormData？ 下一篇使用 JavaScript 验证电子邮件地址文本框