jQuery验证插件：验证具有不同名称的复选框_Jquery_Checkbox_Validation_Jquery Validate

jQuery验证插件：验证具有不同名称的复选框

jquery checkbox validation

jQuery验证插件：验证具有不同名称的复选框,jquery,checkbox,validation,jquery-validate,Jquery,Checkbox,Validation,Jquery Validate,我有一组4个复选框，所有复选框都有不同的名称，并且要求至少选中1个复选框我已经给他们设定了“需要一个”的等级 <html> <head> <script src="scripts/lib/jquery.js" type="text/javascript"></script> <script src="scripts/jquery.validate.js" type="text/javascript"></script>

我有一组4个复选框，所有复选框都有不同的名称，并且要求至少选中1个复选框

我已经给他们设定了“需要一个”的等级

<html>
<head>
<script src="scripts/lib/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
 $(document).ready(function(){
    $("#itemForm").validate({

rules: { 
    check1: {  
        required : {  
            depends: function(element) {  
                $('.require-one:checked').size() == 0; 
            }  
        } 
    } 
}
    });
  });
</script>

</head>
<body>
<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>
</body>
</html>

用火箭发射器打苍蝇

$('.require-one:checked').size() == 0;

使用其名称将规则应用于任何一个复选框。要使表单有效，此复选框必须通过验证。要使此复选框有效，必须选中4个复选框中的至少一个

$("#itemForm").validate({
rules: { 
    'check1': {  
        required: {
            depends: function(element) {
                return $('.require-one:checked').size() == 0;
            }
        } 
    } 
}
});

更新2:

我认为@Anurag走上了正确的道路。检查此工作版本

同样的想法只是一种不同的方式

<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one validate-checkbox-oneormore" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one validate-checkbox-oneormore" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>

jQuery(document).ready(function () {
    $.validator.addMethod('validate-checkbox-oneormore', function (value) {
        return $('.require-one:checked').size() != 0; }, 'need a value');

    jQuery('#itemForm').validate({});
});


jQuery（文档）.ready（函数（）{
$.validator.addMethod（'validate-checkbox-oneormore'，函数（值）{
返回$（'.require-one:checked'）.size（）！=0；}，“需要一个值”）；
jQuery（'#itemForm'）.validate（{}）；
});

贾斯汀有正确的答案。以下是一个扩展，它将所有复选框的错误报告合并为一条消息：

$.validator.addMethod（'require-one'，函数（值）{
返回$（'.require one:checked'）.size（）>0；}，'请至少选中一个框'）；
var复选框=$（'.require one'）；
var checkbox_names=$.map（复选框，函数（e，i）{return$（e）.attr（“name”）}）.join（“”）；
$（“#itemForm”）。验证({
组：{checks:checkbox_names}，
errorPlacement:函数（错误，元素）{
if（element.attr（“type”）=“复选框”）
错误.insertAfter（复选框.last（））；
其他的
错误。插入符（元素）；
}         
});

（请注意，在jquery.validate.js版本1.10.0之后，此代码似乎不起作用。您必须修改它以获得更高版本）

看起来太棒了！不过我对jQuery还是新手。我如何将其放入jQuery代码而不是onClick事件中呢？请检查JSFIDLE链接-。你必须将它与验证插件集成吗？是的，这就是我的意思，对不起！使用验证插件。我是否将其放在规则标题下？是的，它肯定会工作（但JSFIDLE应该是“==”而不是“>”）。但是，现在只有选中复选框#1，错误消息才会消失。如果选中复选框#2，它不会消失，但会提交。当选中任何复选框时，我们如何删除错误类？是的，看起来不是有效的解决方案。我正试图找出同样的问题…Karen，我在这个解决方案上遇到了问题，JSFIDLE似乎坏了。提交表单将返回

{“错误”：“Shell表单不验证…

。这似乎是JSFIDLE生成的，而不是jQuery生成的。@mac9416指向validate.js库的链接在fiddle中被破坏，但在修复它的过程中，我发现代码在1.10.0之后的validate版本中运行不正常。我怀疑所需的更改很小。

<form name="itemForm" id="itemForm" method="post">
<input type="checkbox" name="check1" id="check1" class="require-one validate-checkbox-oneormore" value="1" />
<input type="checkbox" name="check2" id="check2" class="require-one validate-checkbox-oneormore" value="2" />
<input type="text" class="required" />
<input type="submit" />
</form>

jQuery(document).ready(function () {
    $.validator.addMethod('validate-checkbox-oneormore', function (value) {
        return $('.require-one:checked').size() != 0; }, 'need a value');

    jQuery('#itemForm').validate({});
});