jQuery Validate Plugin - 组复选框 addMethod 未触发

Question

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

这是一个代码笔，例如：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

标题：组复选框 addMethod 未触发

“也许我无法将addMethod 与groups 和errorPlacement 选项混合在一起？”

没有这样的限制。

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

示例...

// 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> 元素，您永远不需要编写自定义方法/规则来简单地使它们成为“必需”以进行验证。

你有两个选择：

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

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

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

---

1. 如果出于某种原因，您需要所有三个复选框都具有不同的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]
    })
});