Question

我正在尝试使用jquery的validate插件验证表单。我想要求用户检查组中的至少一个复选框，以便提交表单。这是我的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">

问题是即使没有选中任何内容，表单也会提交。我该如何解决这个问题？

Answer 1

  $('#subscribeForm').validate( {
      rules: {
          list: {
              required: true,
              minlength: 1
          }
       }
   });

我认为这样可以确保至少检查一个。

Answer 2

下面这个脚本应该让你走上正确的轨道？

你可以保持这个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>

并且此javascript验证

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)

您可以找到working example of it here

更新（2012年10月）
此外，应注意复选框必须具有“name”属性，否则它们将不会添加到数组中。只有“id”才有效。

更新（2013年5月）
将提交注册移动到javascript并将提交注册到表单上（原本应该是原来的）

更新（2016年6月）
更改==到===

Answer 3

这个怎么样：

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

Answer 4

Lod Lawson的上述addMethod并不完全正确。它是$ .validator而不是$ .validate，验证器方法名称cb_selectone需要引号。这是我测试的更正版本：

$.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');

Answer 5

以下是使用jquery验证插件进行多个复选框验证的快速解决方案：

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

Answer 6

没有自定义验证方法的好例子，但有元数据插件和一些额外的HTML。

Demo from Jquery.Validate plugin author

Answer 7

这个怎么样

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

您甚至可以进一步指定在回调函数中使用第三个参数选择的最小数字。我还没有测试它，所以请告诉我它是否有效。

Answer 8

我必须做同样的事情，这就是我写的内容。我在我的情况下使其更灵活，因为我有多组复选框要检查。

// param: reqNum number of checkboxes to select
$.fn.checkboxValidate = function(reqNum){
    var fields = this.serializeArray();
    return (fields.length < reqNum) ? 'invalid' : 'valid';
}

然后你可以通过这个函数来检查多个规则的多组复选框。

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

Answer 9

我有一个不同的场景。我的复选框是动态创建的，它们不属于同一组。但至少必须检查其中任何一个。我的方法（从不说这是完美的），我为所有人创建了一个genric验证器：

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与这一个验证器相关联。

当我点击任何一个复选框触发验证器时，我不得不触发验证。

$('#piRequest input:checkbox[name=chkBox1]').click(function(e){
    $("#myform").valid();
});

Answer 10

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

Answer 11

我检查了所有答案，甚至在其他类似问题中，也尝试借助html类和自定义规则找到最佳方法。

我的多个复选框的html结构如下

from itertools import product
import math
comb = [c for c in product(number, repeat=5) if math.isclose(sum(c), 1.0)]

$.validator.addMethod('multicheckbox_rule', function (value, element) {
			var $parent = $(element).closest('.checkbox_wrapper');
			if($parent.find('.checkbox_item').is(':checked')) return true;
            return false;
}, 'Please at least select one');

如何验证具有多个复选框的表单以检查至少一个

11 个答案: