Question

我在大型表单上使用jQuery Validate插件，并且一直使用require_from_group方法（after posting previously）来确保选中三个复选框中的至少一个。

但是，我ran into an issue用它来阻止其他规则的运行。我已经应用了suggested patch，但这似乎也无法正常工作（如上面的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 demo page上遵循第二个例子的原因。

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>

<强> SCRIPT

在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

I wrote a custom method检查以确保勾选三个复选框中的至少一个。

完成工作，无需修改您的任何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 CODE

$(".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"
        }
    }
});

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

3 个答案: