JQuery Validation for Array of Input Elements

Question

I need to validate an array of input text elements (mileage): For example:

<tbody>
  <c:forEach items="${list}" var="item">
        <tr> 
             <!--some other columns---> 
             <td align="left"><input type="text" name="mileage" value="" /></td>
        </tr>
   </c:forEach>                       
</tbody>

The script for validation is as below -

$(document).ready(function(){

        $("#form1").validate({
            rules: {
                mileage: {
                    required: true

                         }
                },            
            submitHandler: function(form) {
                form.submit();
            }

        });       
    });

Now the problem is that the .validate.js only validates the first element of mileage. What can I do? How can I make the plugin validate all of the inputs text ?

I hope you can help me out.

score 8 · Accepted Answer · answered Dec 24 '10 at 12:53

In jquery.validate.js, we can find a function named checkForm, we have to modify it as below:

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

Excellent indeed. But I have found that this function does not take into count the "ignore" property. I have just refined the function in my answer. Hope this helps. — Luca Fagioli, Oct 15 '12 at 09:36

score 4 · Answer 2 · edited May 23 '17 at 11:43

4

Based on eddy answer, this function takes into count also the ignore setting.

        checkForm: function() {
            this.prepareForm();
            for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
                var checkingElements = this.findByName( elements[i].name ).not(this.settings.ignore);
                if (checkingElements.length !== undefined && checkingElements.length > 1) {
                    for (var cnt = 0; cnt < checkingElements.length; cnt++) {
                        this.check( checkingElements[cnt] );
                    }
                } else {
                    this.check( elements[i] );
                }
            }
            return this.valid();
        },

edited May 23 '17 at 11:43

Community

1
1

answered Oct 15 '12 at 09:33

Luca Fagioli

12,722
5
59
57

I prefer not to manipulate plugin source code manually but instead include my custom hot fixed in a seperate .js file, which I then include on the page after jquery.validate.js. Is there a way this can be done with the checkForm-method in the extension? – Stephan Møller Jan 30 '13 at 11:42
1

I have forked the project on github and did a pull request, so hopefully you will find this update directly in a new version of jquery.validate.js – Luca Fagioli Feb 01 '13 at 09:44

score 3 · Answer 3 · answered Dec 24 '10 at 12:11

3

You have to loop through in these cases, like this:

$(document).ready(function() {
    $("#form1").validate({
        submitHandler: function(form) {
            form.submit();
        }
    });  
    $("#form1 input[name='mileage']").each(function() {
       $(this).rules("add", { required: true });
    });  
});

.rules() only affects the first match, so you need a .each() on there to loop through and add any rules to all matches.

answered Dec 24 '10 at 12:11

Nick Craver

623,446
136
1,297
1,155

@Nick Craver. Thank you I tried what you suggested, but it still doesn't work :(. Are you sure that's all I need to do?? :( – eddy Dec 24 '10 at 12:21
@eddy - yup that's all that's needed...are you getting any JavaScript errors in your console? – Nick Craver Dec 24 '10 at 12:22
@Nick Craver- No a single error. For some reason the plugin keeps validating only the first element :( – eddy Dec 24 '10 at 12:28
@eddy - do you have a page I can look at? btw another way to go about it, if you just want `required` would be `` – Nick Craver Dec 24 '10 at 12:28
@nick hi nick, tell you what.. you're my fav in the entire SO community. I love the way you feel responsibility for the Community. I just wanted to say `you're my number One` (nothing Personal) – Dec 24 '10 at 12:39
@Nick Craver- Finally I found how to make the plugin work properly :http://web-funda.blogspot.com/2009/05/jquery-validation-for-array-of-input.html . Now it work fine I just hope it doesn't cause me any problem in the future – eddy Dec 24 '10 at 12:40
@Nick. I just replaced the function named checkForm and with that ,I got fixed the problem :D – eddy Dec 24 '10 at 12:50
@eddy - you *can* do that, but the above should work...I'd give a jsfiddle example if they weren't having issues at the moment. Modifying a non-broken plugin is *never* the right approach IMO. – Nick Craver Dec 24 '10 at 12:57
@Nick. thank you , you've been really helpful, and I'd really appreciate if you can give that example – eddy Dec 24 '10 at 13:09
@eddy - I stand corrected, since 1.6 this no longer works...curious that the author chose to only support checkboxes and radiobuttons for shared `name` attributes, not sure what the thought process was there, since this *is* valid HTML. – Nick Craver Dec 24 '10 at 13:19
@Nick-Could you please, give me a hand over here : http://stackoverflow.com/questions/4528399/how-to-check-if-a-checkbox-in-a-checkbox-array-is-checked-with-jquery :'( – eddy Dec 24 '10 at 23:11

score 0 · Answer 4 · answered Apr 29 '20 at 17:51

Using jquery validate 1.19.1 and modifying the jquery.validate.js file on line 465, replacing with this function should be fine.

checkForm: function() {
            this.prepareForm();
            for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
                var checkingElements = this.findByName( elements[i].name ).not(this.settings.ignore);
                if (checkingElements.length !== undefined && checkingElements.length > 1) {
                    for (var cnt = 0; cnt < checkingElements.length; cnt++) {
                        this.check( checkingElements[cnt] );
                    }
                } else {
                    this.check( elements[i] );
                }
            }
            return this.valid();
        },

I hope to be of help ;)

JQuery Validation for Array of Input Elements

4 Answers4

Linked