2

使用 jQuery Validate 插件，我如何确保至少三个复选框中的一个已被选中？到目前为止，我能做的最好的事情是使所有三个复选框都成为必需的（这不是我想要的），我的代码如下。

我尝试在 jQuery Validate 演示页面上使用此示例，但这要求每个复选框字段都具有相同的名称。我无法做到这一点，因为这些字段是从 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"
  }
});
4

2 回答 2

7

使用文件中包含的require_from_group规则。additional-methods.js

rules: {
    'my_checkbox_1[]': {
        require_from_group: [1, ".my_checkbox_group"]
    }
}
  • 第一个参数是需要的项目数。

  • 第二个参数是class分配给分组中的所有元素。

  • 还可以使用该groups选项将三条消息合并为一条。

新代码：

$(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/

于 2013-02-14T20:21:23.280 回答
2

使用位于 Additional-methods.js 中的 require_from_group 方法，并将类名作为第一个参数和所需的数字作为第二个参数

 <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

于 2013-02-14T20:12:35.250 回答