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

【问题标题】：jQuery Validation Plugin: Validating Checkboxes with Different NamesjQuery 验证插件：验证具有不同名称的复选框
【发布时间】：2010-03-15 03:59:37
【问题描述】：

我有一组 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; 之前输入'return' 但是，现在我的问题是，只有选中复选框#1，错误消息才会消失。如果复选框 #2 被选中，它不会消失，但会提交。如果选中任何复选框，如何消除错误？

rules: { 
    'nameOfAnyCheckbox': {  
        required : {  
            depends: function(element) {  
              return $('.require-one:checked').size() == 0; 
            }  
        } 
    }

【问题讨论】：

标签： jquery checkbox validation jquery-validate

【解决方案1】：

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

http://jsfiddle.net/twd8j0tu/

$.validator.addMethod('require-one', function (value) {
              return $('.require-one:checked').size() > 0; }, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e,i) { return $(e).attr("name")}).join(" ");

$("#itemForm").validate({
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
             if (element.attr("type") == "checkbox")
               error.insertAfter(checkboxes.last());
             else
               error.insertAfter(element);
    }         
});

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

【讨论】：

Karen，我在使用这个解决方案时遇到了问题，而且 JSFiddle 似乎坏了。提交表单返回{"error": "Shell form does not validate...。这似乎是 JSFiddle 生成的，而不是 jQuery 生成的。
@mac9416 到 validate.js 库的链接在小提琴中被破坏，但在修复它的过程中，我发现代码在 1.10.0 之后的验证版本中没有运行.我怀疑所需的更改会很小。

【解决方案2】：

用火箭发射器拍苍蝇？

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

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

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

更新 2：

http://jsfiddle.net/MkPtP/1/

【讨论】：

这看起来太棒了！不过，我是 jQuery 的新手。我如何将它放入 jQuery 代码而不是 onClick 事件中？
检查 jsfiddle 链接 - jsfiddle.net/zQg8m。您必须将其与验证插件集成吗？
是的，我就是这个意思，对不起！使用验证插件。我是否将其放在“规则”标题下？
是的，它确实有效（但 jsfiddle 应该是 '==' 而不是 '>'）。但是，现在只有选中 Checkbox #1，错误消息才会消失。如果复选框 #2 被选中，它不会消失，但会提交。当任何一个复选框被选中时，我们如何删除错误类？
是的，看起来不是一个有效的解决方案。我试图弄清楚同样的事情......

【解决方案3】：

我认为@Anurag 是在正确的道路上。看看这个工作版本...

http://jsfiddle.net/Y23ec/

相同的想法只是不同的做法。

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

【讨论】：