|
Validating checkboxes using the JQuery validate plug-in |
||||||||
I have recently spent some time building a dynamic XML driven form generator. The last element of this was the checkbox form element. All my other fields were being validated as either required, or needing a certain length using the JQuery Validation plug-in. ( http://jquery.bassistance.de/validate/)
This article explains how I put together a checkbox validation routine using the Validate plug-in.
Start of by including the JQuery library and the Validation plug-in.
2<head>
3
4<s/cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
5<s/cript type="text/javascript" src="jquery.validate.pack.js"></script>
Next create a small form with your checkbox values in. In the example below I am listing a series of pie flavours (I like Pie). They all have the same 'name' attribute. There is also a final option for users who with to enter their own values.
2body{padding:0; margin:10; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
3
4#flavour label.error {display: none;}
5
6label.error {color:red; padding: 5px;}
7
8</style>
9
10</head>
11<body>
12
13<h1>What is your favourite type of Pie?</h1>
14
15<form method="post" id="form">
16<fieldset id="flavour">
17<label for="flavour" class="error">Please select at least one flavour.<br></label>
18<input name="flavour" id="1" type="checkbox" value="1"/>Ham & Mushroom<br/>
19<input name="flavour" id="2" type="checkbox" value="2"/>Steak & Ale<br/>
20<input name="flavour" id="3" type="checkbox" value="3"/>Chicken<br/>
21<input name="flavour" id="4" type="checkbox" value="4"/>Vegetarian<br/>
22<input name="flavour" id="other" type="checkbox" value="5"/>Other<br/>
23<p></p>
24If Other<br><input type="text" name="otherFlavour">
25</fieldset>
26<p><input class="submit" type="submit" value="Submit"/></p>
27</form>
28</body>
29</html>
Lastly we must construct the Validate plug-in script. The script attaches itself to the id 'form', and validates against the 'flavour' fields. By declaring that 'flavour: { required : true}' we are saying that the form element 'flavour' must exist. Also the 'minlength' declaration here can be used to determine how many of the checkbox values are required. Changing it to 3 will force the user to make 3 selections.
The 'otherFlavour' requirement is a little tricker. It is required based on the condition of the '#other' field(id) having been selected. Only then will the validation rules for that element be run. In this case a length check to make sure it has a value.
2$().ready(function() {
3 $("#form").validate({
4 rules: {
5 flavour: {required: true, minlength: 1},
6 otherFlavour: { required: function(element){
7 if ($('#other').is(':checked')){
8 return true;
9 } else {
10 return false;
11 }
12 },
13 minlength: 1
14 }
15 },
16 messages: {otherFlavour: "Please specify a different flavour."}
17 });
18});
19
20</script>
Using this code it is possible to enforce client side checkbox validation. You can see an example of this here.
Nice information, I really appreciate the way you presented.Thanks for sharing..
