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

标题：群组复选框addMethod Not Firing

＆＃34;也许我无法将addMethod与groups和errorPlacement选项混合在一起？＆＃34;

没有这样的限制。

您的自定义方法＆＃34;未触发＆＃34; 的原因是您尚未将新的自定义规则分配给任何字段。换句话说，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>元素，您永远不需要编写自定义方法/规则来简单地制作它们＆＃34; required＆＃34;用于验证。

您有两种选择：

将所有三个复选框元素设为相同name，并且根据HTML，它们都将被视为单个＆＃34;数据输入＆＃34;在<form>容器内。使用required规则时，jQuery Validate插件将自动至少生成一个复选框，您不需要groups选项。

DEMO 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选项。

DEMO 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()方法声明规则，如下所示......

DEMO 2B：http://jsfiddle.net/ckchxxyd/1/

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

jQuery Validate插件 - 组复选框addMethod Not Firing

1 个答案: