Author: TomdeMan
Related Categories:
jQuery
June 2, 2008
I have a form with two sets of check boxes. I need to validate a selection from each set has been made before I allow a submit. jQuery has a handful of selectors to help you easily get a hold of elements. The common approach is to treat the check boxes as a single object, and traverse through each node using the .each() method. But I wanted to find a simple one-line approach I could re-use for each set.
Typical Approach (single set of check boxes)
function() {}
);
That's not going to work if you have two sets of check boxes on the form with different names.
<input type="checkbox" name="fieldName" id="fieldId" value="fieldVal2" />
<input type="checkbox" name="fieldName" id="fieldId" value="fieldVal3" />
<input type="checkbox" name="fieldName2" id="fieldId2" value="fieldVal" />
<input type="checkbox" name="fieldName2" id="fieldId2" value="fieldVal2" />
<input type="checkbox" name="fieldName2" id="fieldId2" value="fieldVal3" />
Don't make the mistake of using the ID as a selector: $('#fieldId:checked') It will limit you to the first element of the set.
To validate a required selection has been made, we'll select the check boxes we need by selecting the checked ones by name, and counting the size(nodes) of the object. From there the logic is in your hands. In this example, I am checking to see if at least one has been checked in either set.
alert('Please Make A Selection for fieldName');
}else if($('input[@name=fieldNames]:checked').size() == 0){
alert('Please Make A Selection for fieldNames');
}
Comments:
[Add Comment]
Gilberto Albino says:
JUST TO NOTE:
Hey your approach is very useful, because when it comes to checkboxex they are treated as arrays, so validating with "size" is a great solution.
But just to note, to who is beginning with
programming would get little issue, because it would send the form anyway because it doesn't block the submition of the form in use.
So it must return false like this:
if($('input[@name=fieldName]:checked').size() == 0){
alert('Please Make A Selection for fieldName');
return false; // this will block the submit
}else if($('input[@name=fieldNames]:checked').size() == 0){
alert('Please Make A Selection for fieldNames');
return false; // this will block the submit
}
11/9/08 2:09 PM
c.s says:
id's must always be unique.
2/5/09 10:48 PM
Jamie Krug says:
Hey Tommy D, hope things are well :) I found this post in a search to figure out how to do some checkbox validation with the jquery.validate plugin (http://bassistance.de/jquery-plugins/jquery-plugin...), which I've become a big fan of!
Here's a nice little demo with checkbox validation:
http://jquery.bassistance.de/validate/demo/radio-c...
Simply add validate="required:true, minlength:2" to one checkbox input tag in each group you'd like validated, changing the minlength to the number of required selections. If you don't want to bother with the metadata plugin (which allows you to just use the validate attribute right in the markup), it's also very simple to configure validations and custom messages and much more in some short javascript lines.
Cheers!
Jamie
2/6/09 4:20 PM
Pete says:
Thanks for the post. Just helped me solving a validation issue with a bunch of checkboxes.
11/27/09 11:42 AM
[Add Comment]