确保至少有一个从三个复选框使用jQuery验证

Question

我在大表单上使用jQuery Validate插件，并且已经使用require_from_group方法（after posting previously）确保至少有一个来自一组检查三个复选框。

但是，我已经ran into an issue与这阻止其他规则工作。我已经申请了一个suggested patch，但这似乎并没有正常工作（如上面提到的GitHub问题）。

所以我需要找到另一种方法来验证这组三个复选框字段（请注意，我需要专门针对这组三个checkboes，因为我在表单上有其他不需要验证的复选框字段），但我不确定现在从哪里开始。我想我需要添加一些自定义规则到我的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

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 2

尝试

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 3

我认为你需要改变name属性为。需要为每个复选框设置相同的名称。

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