Sometimes we need to validate an array of input elements: For example –
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <form name="signupForm" class="cmxform" id="signupForm" method="get" action=""><select name="category[]" id="cat_1"><option value="">Select One</option><option value="1">aa</option><option value="2">bb</option><option value="3">cc</option><option value="4">dd</option></select><select name="category[]" id="cat_2"><option value="">Select One</option><option value="5">ee</option><option value="6">ff</option><option value="7">gg</option><option value="8">hh</option></select><select name="category[]" id="cat_3"><option value="">Select One</option><option value="9">ii</option><option value="10">jj</option><option value="11">kk</option><option value="12">ll</option></select><input class="submit" type="submit" value="Submit"></form> |
Now we will use jquery validation plugin jquery.validate.js for validating the form. The condition will be that user will have to choose category from each dropdown. The script for validation will be as below –
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript">$().ready(function() {// validate the comment form when it is submitted$("#signupForm").validate({rules: {"category[]": "required"},messages: {"category[]": "Please select category",}});});</script> |
Now the problem is that the readymade jquery.validate.js only validates the first element of category[]. So, we need to modify it a little bit.
In jquery.validate.js, we can find a function named checkForm, we have to modify it as below:
1
2
3
4
5
6
7
8
9
10
11
12
13
| checkForm: function() {this.prepareForm();for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {this.check( this.findByName( elements[i].name )[cnt] );}} else {this.check( elements[i] );}}return this.valid();} |
No comments:
Post a Comment
Please Comment Here!