Question

我有一个表单，我正在使用jQuery验证从前端进行验证。

大多数验证都按照我的要求运行。但是，对于复选框，验证不起作用。我的验证jquery

中有以下规则和消息

  $('#submitDetails').validate({
    // 1. validation rules.
    rules: {
    ......
    ......
    ......
      custom9: {
        required: true
      },
      custom10:{
          required:true
      },
      custom11: {
        required: true
      }
    },
    // 2. Validation fail messages
    messages: {
      custom9: {
        required: "You can only claim your Plush Rewards once you have received all your items found on your reciept"
      },
      custom10: {
        required: "You must agree to the terms of conditions in order to claim your Plush Rewards Prepaid Visa Gift Card"
      },
      custom11: {
        required: "You must agree to the terms of conditions in order to claim your Plush Rewards Prepaid Visa Gift Card"
      }
    ......
    ......
    ......

html是

<div class="ticks">
    <div class="col-xs-12  tick1">
        <input type="checkbox" data-label="Have you received your entire order from Plush?" name="custom9" id="custom9" value="0" class="styled myClass prettyCheckable"><span class="mandatory tick1Mandatory"> * </span>

    </div>
    <!--<div id="error_msg"></div>  -->
    <div class="col-xs-12 tick2">
        <input type="checkbox" data-label="Please tick if you would like to join our mailing list and receive special bonus offers and the latest Plush news" name="custom10" id="custom10" value="1" class="styled myClass prettyCheckable" checked>
    </div>
    <div class="col-xs-12 tick3">
        <input type="checkbox" data-label="I have read and agree to the Terms and Conditions of this promotion and understand the Plush Privacy Policy" name="custom11" id="custom11" value="0" class="styled myClass prettyCheckable"><span class="mandatory tick2Mandatory"> * </span>

    </div>
</div>

单击提交按钮时，不会触发与custom9-11相关的验证。

Answer 1

可能已经晚了几年，但万一有其他人遇到这个问题：

从标记我可以告诉你正在使用prettyCheckable插件作为复选框。您的实际复选框是否可能被PrettyCheckable隐藏，而Validation插件会忽略它们？

如果是这种情况，您可以尝试通过更改jquery.validate插件忽略设置来修复此问题：

    $.validator.setDefaults({ 
        ignore: [] // DON'T IGNORE PLUGIN HIDDEN SELECTS, CHECKBOXES AND RADIOS!!!
    });

Answer 2

复选框验证的HTML示例

<label for="terms">terms : </label>
<input type="checkbox" name="terms[]" value="your value" id="terms">

使用方括号表示复选框名称。
必须为复选框提供价值。

Jquery代码

rules: {
     'terms[]': { required: true },
},
messages:{
    'terms[]': "check the checbox"
}

名称

必须使用单引号

Answer 3

在我的项目中，我也遇到了同样的头痛。这是因为我的本机复选框被可切换的复选框图像隐藏。因此，从未调用过我的自定义复选框验证。

我通过将ignore默认设置为不忽略我的隐藏复选框来解决了该问题。

$('#myForm').validate({
    ignore: [':not(checkbox:hidden)'],
    rules: {
        confirmVacant: 'vacantChecked',
        // ...
    },
    // ...
});

对于复选框，jquery验证不会被触发

3 个答案: