jQuery 验证插件 - 组复选框 addMethod 未触发

Question

我试图确保选中一个复选框，但似乎没有选择验证插件的 group 选项以及自定义 addMethod。我已经阅读了文档和多个堆栈溢出帖子 - 在发现类似问题时，我没有看到任何失败的方式 - 换句话说，我很难过。非常感谢任何帮助。谢谢。

这里有一个codepen，例如：http://codepen.io/jaegs/pen/KVVYYw

注意：emailField有一条规则被注释掉了，取消注释并点击submit按钮显示验证插件正在运行。

JS

$.validator.addMethod('groupCheck', function(value) {         
    return $('.msGroup:checked').size() > 0; 
}, 'Please choose at least one subscription.'); 

var checkboxes = $('.msGroup'); 
var checkbox_names = $.map(checkboxes, function(e, i){ 
    return $(e).attr("name"); 
}).join(" "); 

$('#formInput').validate({ 
    debug: true,
    //rules: {
    //  emailField: "required"
    //}, 
    groups: { 
        checks: checkbox_names
    }, 
    errorPlacement: function(error, element){ 
      if (element.attr("name") == "emailField"){ 
        error.appendTo('#emailError'); 
      } else { 
        error.appendTo('#checkboxError'); 
      } 
    } 
});

HTML

<form id="formInput"> 
  <label>E-mail Address*</label>
  <input type="text" name="emailField" id="emailField"/> 

  <div id="emailError"></div> 

  <h4>Select the e-mails you would like to receive</h4> 
  <ul> 
    <li> 
      <input class="msGroup" type="checkbox" name="one" id="one" /> 
      <label for="one">one</label> 
    </li> 
    <li> 
      <input class="msGroup" type="checkbox" name="two" id="two" /> 
      <label for="two">two</label> 
    </li> 
    <li> 
      <input class="msGroup" type="checkbox" name="three" id="three" /> 
      <label for="three">three</label> 
    </li> 
  </ul> 

  <button type="submit" id="submitButton" name="submitButton">SUBSCRIBE</button> 

  <div id="checkboxError"></div>
</form>

Answer 1

Title: Group Checkbox addMethod Not Firing

"Maybe I can't blend the addMethod with the groups and errorPlacement options?"

没有这样的限制。

您的自定义方法 “未触发” 的原因是您尚未将新的自定义规则分配给任何字段。换句话说，the addMethod() method 只是 创建了 自定义 method/rule；您仍然需要分配自定义规则，以便插件知道要在哪些字段上使用它。

示例...

// create a custom rule
$.validator.addMethod('customRule', function(value, element, params) {         
    ....
}, 'Error Message.'); 

// initialize the plugin
$('#myForm').validate({
    rules: {  
        myField: {
            customRule: true  // assign the custom rule
        }
    },
    ....

仅供参考 - groups 选项只是合并来自多个元素的消息。这不是规定。

此外，复选框是非常常见的 <form> 元素，您永远不需要编写自定义 method/rule 来简单地使它们成为验证的“必需”元素。

你有两个选择：

为所有三个复选框元素提供相同的 name，并且根据 HTML，它们都将被视为 <form> 容器中的单个“数据输入”。当使用 required 规则时，jQuery 验证插件将自动使至少一个复选框成为必需的，您将不需要 groups 选项。

演示 1：http://jsfiddle.net/5qjk9bg6/

$('#formInput').validate({
    rules: {
        one: { // <- all three checkboxes have this name
            required: true
        }
    },
    ....

如果出于某种原因，您需要所有三个复选框都具有不同的 name，则使用 the additional-methods.js file 中包含的 require_from_group 方法。使用此方法，您将在每个复选框旁边收到一条验证消息。要消除此消息重复，您可以使用 groups 选项。

演示 2：http://jsfiddle.net/ckchxxyd/

$('#formInput').validate({
    rules: {
        one: {
            require_from_group: [1, '.msGroup']
        },
        two: {
            require_from_group: [1, '.msGroup']
        },
        three: {
            require_from_group: [1, '.msGroup']
        }
    },
    groups: { // combine the three error messages into one
        myGroup: "one two three"
    },
    .....

在有很多复选框并且使用 rules 选项会很麻烦的情况下，可以使用 .rules() 方法声明规则，如下所示...

演示 2B：http://jsfiddle.net/ckchxxyd/1/

$('.msGroup').each(function() {
    $(this).rules('add', {
        require_from_group: [1, this]
    })
});

jQuery 验证插件 - 组复选框 addMethod 未触发

jQuery Validate Plugin - Group Checkbox addMethod Not Firing

forms

jquery

jquery-validate