Question

使用jQuery Validate插件，如何确保至少检查了三个复选框中的一个？到目前为止，我能做的最好的事情就是要使所有三个复选框都需要（这不是我想要的），而我的代码远远落在下面。

我尝试在jQuery Validate演示页面上使用this example，但这需要每个复选框字段具有相同的名称。我无法做到这一点，因为这些字段是从CMS中提取的，而且每个字段都需要不同的名称。

我想将此保留在jQuery validate中，因为我已经在这里验证了很多其他字段（为了保持这个示例清理而被删除），这是我用有限的JS / jQuery知识验证表单的唯一方法。在此先感谢您的帮助。

这是我的HTML：

<form class="my_form" method="post" action="/" >

  <div><ul class="form_errors"></ul></div>

  <label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox_1[]" type="checkbox" value="Yes"> My checkbox 1</label>
  <label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox_2[]" type="checkbox" value="Yes"> My checkbox 2</label>
  <label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox_3[]" type="checkbox" value="Yes"> My checkbox 3</label>

  <input type="submit" value="Submit" />

</form>

这是我的JS：

$(".my_form").validate({
  errorLabelContainer: ".form_errors",
  wrapper: "li",
  rules: {
    'my_checkbox_1[]': { required: true },
    'my_checkbox_2[]': { required: true },
    'my_checkbox_3[]': { required: true }
  },
  messages: {
    'my_checkbox_1[]': "This field is required",
    'my_checkbox_2[]': "This field is required",
    'my_checkbox_3[]': "This field is required"
  }
});

Answer 1

使用the additional-methods.js file中包含的require_from_group规则。

rules: {
    'my_checkbox_1[]': {
        require_from_group: [1, ".my_checkbox_group"]
    }
}

第一个参数是需要的项目数。
第二个参数是分配给分组中所有元素的class。
还可以使用the groups option将三条消息合并为一条。

新代码：

$(document).ready(function () {

    $(".my_form").validate({
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            names: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                require_from_group: [1, ".my_checkbox_group"]
            },
            'my_checkbox_2[]': {
                require_from_group: [1, ".my_checkbox_group"]
            },
            'my_checkbox_3[]': {
                require_from_group: [1, ".my_checkbox_group"]
            }
        }
    });

});

工作演示：http://jsfiddle.net/ya7Px/

Answer 2

使用additional_from_group方法，该方法位于additional-methods.js中，并将类名作为第一个参数，并将第二个参数作为第二个

 <input class="productinfo" name="partnumber">
 <input class="productinfo" name="description">

...将验证，除非其中至少有一个被填充。

partnumber:  {require_from_group: [1,".productinfo"]},
description: {require_from_group: [1,".productinfo"]}

https://github.com/jzaefferer/jquery-validation/blob/master/additional-methods.js#L337

使用jQuery Validate插件确保选中三个复选框中的至少一个

2 个答案: