jQuery Validation Plugin: Validating Checkboxes with Different Names

Question

I have a set of 4 checkboxes, all with different names, and require that at least 1 is checked.

I have set the class on all of them to '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>

If you put in 'return' before the $('.require-one:checked').size() == 0; However, now my problem is the error message will only disappear if Checkbox #1 is selected. If Checkbox #2 is selected it will not disappear, but will submit. How do I remove the error if any of the checkboxes are checked?

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

Karen Zilles · Accepted Answer · 2017-09-22 20:28:47Z

5

Justin has the correct answer. Here is an extension that consolidates the error reporting for all the check boxes into a single message:

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

(Please note that this code doesn't seem to work after jquery.validate.js version 1.10.0. You will have to modify it for later versions).

edited Sep 22, 2017 at 20:28

answered Jun 1, 2011 at 23:02

Karen Zilles

7,6713 gold badges37 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

crenshaw-dev Over a year ago

Karen, I'm having trouble with this solution, and the JSFiddle seems broken. Submitting the form returns {"error": "Shell form does not validate.... That seems to be JSFiddle-generated rather than jQuery-generated.

Karen Zilles Over a year ago

@mac9416 The link to the validate.js library was broken in the fiddle, but in the process of fixing it I found out that the code doesn't run as is in validate versions after 1.10.0. I suspect that the changes required would be minor.

Anurag · Accepted Answer · 2010-03-15 06:36:23Z

1

Swatting a fly with a rocket launcher?

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

Apply the rule on any one of the checkboxes using it's name. For the form to be valid, this checkbox must pass validations. For this checkbox to be valid, at least one of the 4 checkboxes must be checked.

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

Updated 2:

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

edited Mar 15, 2010 at 6:36

answered Mar 15, 2010 at 4:25

Anurag

142k37 gold badges223 silver badges262 bronze badges

9 Comments

Michael Over a year ago

That looks amazing! I am new to jQuery though. How would I put that into the jQuery code instead of an onClick event?

Anurag Over a year ago

check the jsfiddle link - jsfiddle.net/zQg8m. do you have to integrate this with the validation plugin?

Michael Over a year ago

Yes, that's what I meant, sorry! With the validation plugin. Do I put it under a Rules heading?

Michael Over a year ago

Yes, it for sure works (but jsfiddle should be '==' not '>'). However, now the error message will only disappear if Checkbox #1 is selected. If Checkbox #2 is selected it will not disappear, but will submit. How do we remove the error class when any of the checkboxes are selected?

devth Over a year ago

Yeah, doesn't look like a valid solution. I'm trying to figure out the same thing...

|

Justin · Accepted Answer · 2011-02-16 00:15:02Z

I think @Anurag was on the right path. Check out this working version...

http://jsfiddle.net/Y23ec/

Same idea just a different way of doing it.

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

Collectives™ on Stack Overflow

jQuery Validation Plugin: Validating Checkboxes with Different Names

3 Answers 3

2 Comments

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related