如何validation具有多个checkbox的表单以检查至less一个
我试图validation一个窗体使用jQuery的validation插件。 我想要求用户至less检查一个组中的一个checkbox，以便提交表单。 这是我的jQuery代码：
$().ready(function() { $("#subscribeForm").validate({ rules: { list: {required: "#list0:checked"} }, messages: { list: "Please select at least one newsletter"} }); }); 这里是html表单：
<form action="" method="GET" id="subscribeForm"> <fieldset id="cbgroup"> <div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div> <div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div> <div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div> </fieldset> <input name="submit" type="submit" value="submit">
问题是，即使没有任何检查，表单提交。 我该如何解决这个问题？
下面这个脚本应该把你放在正确的轨道上吗？
你可以保持这个HTML相同（虽然我把方法改为POST）：
<form method="POST" id="subscribeForm"> <fieldset id="cbgroup"> <div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div> <div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div> <div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div> </fieldset> <input name="submit" type="submit" value="submit"> </form>
和这个JavaScriptvalidation
function onSubmit() { var fields = $("input[name='list']").serializeArray(); if (fields.length === 0) { alert('nothing selected'); // cancel submit return false; } else { alert(fields.length + " items selected"); } } // register event on form, not submit button $('#subscribeForm').submit(onSubmit)
你可以在这里find一个工作的例子
更新（2012年10月）
另外应该注意的是checkbox必须有一个“名称”属性，否则它们将不会被添加到数组中。 只有“ID”才会起作用。
更新（2013年5月）
将提交注册移至javascript并将提交注册到表单上（原本应该是这样的）
更新（2016年6月）
将==更改为===
$('#subscribeForm').validate( { rules: { list: { required: true, minlength: 1 } } });
我认为这将确保至less有一个被检查。
这个怎么样：
$(document).ready(function() { $('#subscribeForm').submit(function() { var $fields = $(this).find('input[name="list"]:checked'); if (!$fields.length) { alert('You must check at least one box!'); return false; // The form will *not* submit } }); });
上述罗德·劳森的addMethod并不完全正确。 它是$ .validator而不是$ .validate，validation器方法名称cb_selectone需要引号。 这是我testing的一个更正的版本：
$.validator.addMethod('cb_selectone', function(value,element){ if(element.length>0){ for(var i=0;i<element.length;i++){ if($(element[i]).val('checked')) return true; } return false; } return false; }, 'Please select at least one option');
以下是使用jQueryvalidation插件进行多重checkboxvalidation的快速解决scheme：
jQuery.validator.addMethod('atLeastOneChecked', function(value, element) { return ($('.cbgroup input:checked').length > 0); }); $('#subscribeForm').validate({ rules: { list0: { atLeastOneChecked: true } }, messages: { list0: { 'Please check at least one option' } } }); $('.cbgroup input').click(function() { $('#list0').valid(); });
这个怎么样
$.validate.addMethod(cb_selectone, function(value,element){ if(element.length>0){ for(var i=0;i<element.length;i++){ if($(element[i]).val('checked')) return true; } return false; } return false; }, 'Please select a least one')
现在你可以做了
$.validate({rules:{checklist:"cb_selectone"}});
你甚至可以进一步指定在callback函数中的第三个参数select的最小数量。我还没有testing过，所以告诉我，如果它的工作。
很好的例子没有自定义validation方法，但与元数据插件和一些额外的HTML。
来自Jquery.Validate插件作者的演示
我必须做同样的事情，这就是我写的。我在这个例子中使得它更加灵活，因为我有多组checkbox要检查。
// param: reqNum number of checkboxes to select $.fn.checkboxValidate = function(reqNum){ var fields = this.serializeArray(); return (fields.length < reqNum) ? 'invalid' : 'valid'; }
那么你可以通过这个函数来检查具有多个规则的多组checkbox。
// helper function to create error function err(msg){ alert("Please select a " + msg + " preference."); } $('#reg').submit(function(e){ //needs at lease 2 checkboxes to be selected if($("input.region, input.music").checkboxValidate(2) == 'invalid'){ err("Region and Music"); } });
我有一个轻微的不同的情况。 我的checkbox是dynamic创build的，它们不是同一个组。 但至less他们中的任何一个都必须检查。 我的方法（不要说这是完美的），我为他们创build了一个genricvalidation器：
jQuery.validator.addMethod("validatorName", function(value, element) { if (($('input:checkbox[name=chkBox1]:checked').val() == "Val1") || ($('input:checkbox[name=chkBox2]:checked').val() == "Val2") || ($('input:checkbox[name=chkBox3]:checked').val() == "Val3")) { return true; } else { return false; } }, "Please Select any one value");
现在我不得不将每个chkbox关联到这个单一的validation器。
当我点击任何checkbox触发validation器时，我也必须触发validation。
$('#piRequest input:checkbox[name=chkBox1]').click(function(e){ $("#myform").valid(); });
if ( document.forms["form"]["mon"].checked==false && document.forms["form"]["tues"].checked==false && document.forms["form"]["wed"].checked==false && document.forms["form"]["thrs"].checked==false && document.forms["form"]["fri"].checked==false ) { alert("Select at least One Day into Five Days"); return false; }
