jQuery Validation Plugin:验证具有不同名称的复选框

时间:2010-03-15 03:59:38

标签: jquery checkbox validation jquery-validate

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

我已将所有这些课程设置为'require-one'。

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

如果您在'return'之前放入$('.require-one:checked').size() == 0;但是,现在我的问题是,如果选中了复选框#1,错误消息将只会消失。如果选中Checkbox#2,它将不会消失,但会提交。如果选中任何复选框,如何删除错误?

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

3 个答案:

答案 0 :(得分:5)

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

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之后似乎不起作用。您必须为以后的版本修改它)。

答案 1 :(得分: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/

答案 2 :(得分:0)

我认为@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({});
});