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

Question

我正在以较大的形式使用jQuery Validate插件，并且一直在使用require_from_group方法（ 在先前发布后 ），以确保选中了三个复选框中的至少一个。

但是，我遇到了一个问题 ，该问题使其他规则无法正常工作。 我已经应用了建议的补丁程序 ，但似乎也无法正常工作（如上述GitHub问题所述）。

因此，我需要找到另一种方法来验证这组三个复选框字段（请注意，我需要专门针对这组三个复选框，因为我在表单上还有其他不需要验证的复选框字段），但是我现在不知道从哪里开始。 我以为我需要在我的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"
  }
});

编辑1：对不起，我应该补充说每个复选框的名称属性不能相同。 这些名称映射到CMS中的特定自定义字段名称，因此，如果它们都相同，则在提交表单时这些字段中的值将无法正确保存。 这也是为什么我从不遵循jQuery Validate演示页上的第二个示例的原因。

Answer 1

尝试

的HTML

您不必使用其他name array attribute ，它可以像

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

脚本

在validate Plugin

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

来自http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

在simple Jquery

var isChecked=false;
$('input.my_checkbox_group').each(function(){
   if($(this).is(':checked'))
   {
       isChecked=true;
   }
});
if(isChecked==false)
{
   alert("Please select a group");
}

Answer 2

我编写了一个自定义方法 ，该方法检查以确保至少选中了三个复选框中的一个。

它可以完成工作， 而无需修改您的任何name或id属性或向HTML添加任何新内容。 （但是，您清理了一些无效的HTML。）

$.validator.addMethod("checkboxrule", function (value, element) {
    return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'));
}, "Select at least one of these three");

工作演示： http ： //jsfiddle.net/u4WM4/

我还使用了groups选项将这三个消息合为一体。 （如果您要发送三则消息，则可以将其删除。）

完整的jQuery：

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ 
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        }
    });

});

Answer 3

我认为您需要为此更改名称属性。 需要为每个复选框设置相同的名称。

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

JS代码

$(".my_form").validate({
  errorLabelContainer: ".form_errors",
  wrapper: "li",
  rules : {
        "my_checkbox[]" : {
            required : true,
            minlength : 1
        }
    },
    messages : {
        "my_checkbox[]" : {
            required : "must have checkbox selected",
            minlength : "atleast 1 checkbox should be checked"
        }
    }
});