使用jQuery Validate插件确保至少选中三个复选框之一 [英] Using jQuery Validate plugin to ensure at least one of three checkboxes is checked

问题描述

使用jQuery Validate插件，如何确保至少选中三个复选框之一?到目前为止，我能做的最好的事情就是选中所有三个复选框(这不是我想要的)，而实现这一目标的代码如下.

Using the jQuery Validate plugin, how can I make sure that at least one of three checkboxes has been checked? The best I can do so far is to make all three checkboxes required (which isn't what I want), and my code for getting this far is below.

我尝试在jQuery Validate演示页面上使用此示例，但这需要复选框每个字段具有相同的名称.我无法执行此操作，因为这些字段是从CMS提取的，它们各自需要不同的名称.

I tried using this example on the jQuery Validate demo page, but that requires the checkbox fields to each have the same name. I'm unable to do this, as these fields are pulled from a CMS and they each need the different names.

我想让它保持在jQuery验证之内，因为这里还有许多其他字段正在验证(为了保持本示例的简洁性)，这是我可以使用有限的JS/jQuery知识来验证表单的唯一方法.预先感谢您对此提供的任何帮助.

I want to keep this within jQuery validate as I've got lots of other fields being validated here (stripped out to keep this example clean) and it's the only way I can validate forms with my limited JS/jQuery knowledge. Thanks in advance for any help with this.

这是我的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"
  }
});

推荐答案

使用

• 第一个参数是所需的项目数.

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

  还使用 groups选项将三则消息合并为一个. /p>

新代码:

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

Working Demo: http://jsfiddle.net/ya7Px/

这篇关于使用jQuery Validate插件确保至少选中三个复选框之一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！