2

我有一个表单，我在其中使用 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 相关的验证。

4

3 回答 3

13

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

从标记中，我可以告诉您正在为您的复选框使用 prettyCheckable 插件。是否有可能您的实际复选框被 prettyCheckable 隐藏并且验证插件忽略了它们？

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

    $.validator.setDefaults({ 
        ignore: [] // DON'T IGNORE PLUGIN HIDDEN SELECTS, CHECKBOXES AND RADIOS!!!
    });
于 2016-12-15T19:13:26.187 回答
1

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

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

$('#myForm').validate({
    ignore: [':not(checkbox:hidden)'],
    rules: {
        confirmVacant: 'vacantChecked',
        // ...
    },
    // ...
});
于 2020-12-15T01:07:37.210 回答
1

复选框验证的 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"
}
  • 单引号是必须的名称
于 2017-07-15T15:46:37.303 回答