如何验证具有多个复选框的表单，以选中至少一个复选框 [英] How to validate a form with multiple checkboxes to have atleast one checked

问题描述

我想使用jquery的验证插件来验证表单。我想要求用户检查组中的至少一个复选框，以便提交表单。这里是我的jquery代码：

  $（）。ready（function（）{
 $（＃subscribeForm） .validate（{
 rules：{list：{required：＃list0：checked}}，
 messages：{list：请选择至少一个通讯} 
} 
}）; 
  

这里是html表单：

 < form action =method =GETid =subscribeForm> 
< fieldset id =cbgroup> 
< div>< input name =listid =list0type =checkboxvalue =newsletter0> zero< / div> 
< div>< input name =listid =list1type =checkboxvalue =newsletter1> one< / div& 
< div>< input name =listid =list2type =checkboxvalue =newsletter2> two< / div& 
< / fieldset> 
< input name =submittype =submitvalue =submit> 
  

问题是即使没有选中也不会提交。

解决方案

下面的脚本应该会把你放在正确的轨道上吗？

你可以保持这个html是一样的（虽然我改变了方法POST）：

  ; form method =POSTid =subscribeForm> 
< fieldset id =cbgroup> 
< div>< input name =listid =list0type =checkboxvalue =newsletter0> zero< / div> 
< div>< input name =listid =list1type =checkboxvalue =newsletter1> one< / div& 
< div>< input name =listid =list2type =checkboxvalue =newsletter2> two< / div& 
< / fieldset> 
< input name =submittype =submitvalue =submit> 
< / form> 
  

并且此javascript验证

  function onSubmit（）
 {
 var fields = $（input [name ='list']）serializeArray 
 if（fields.length === 0）
 {
 alert（'nothing selected'）; 
 //取消提交
 return false; 
} 
 else 
 {
 alert（fields.length +items selected）; 
} 
} 
 
 //在表单上注册事件，不提交按钮
 $（'＃subscribeForm'）。submit（onSubmit）
  

，您可以找到这里的工作示例

UPDATE（2012年10月）

应该注意的是，复选框必须有一个name属性，否则它们不会被添加到数组中。只有id无效。

UPDATE（2013年5月）

将提交注册移至javascript和 更新（2016年6月）

Changes = =到===

I'm trying to validate a form using the validate plugin for jquery. I want to require that the user check at least one checkbox in a group in order for the form to be submitted. Here's my jquery code:

$().ready(function() {
$("#subscribeForm").validate({
   rules:   { list: {required: "#list0:checked"} },
   messages:  { list:  "Please select at least one newsletter"}                                                        
 });
 });

and here's the html form:

<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">

The problem is that the form submits even if nothing is checked. How can I resolve this?

解决方案

This script below should put you on the right track perhaps?

You can keep this html the same (though I changed the method to 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>

and this javascript validates

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)

and you can find a working example of it here

UPDATE (Oct 2012)
Additionally it should be noted that the checkboxes must have a "name" property, or else they will not be added to the array. Only having "id" will not work.

UPDATE (May 2013)
Moved the submit registration to javascript and registered the submit onto the form (as it should have been originally)

UPDATE (June 2016)
Changes == to ===

这篇关于如何验证具有多个复选框的表单，以选中至少一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！