CODEWITHSUNDEEP
javascriptjqueryhtmljquery-validate
eddy
eddy

Reputation: 4413

JQuery Validation for Array of Input Elements

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.

Upvotes: 7

Views: 21381

Answers (4)

J .
J .

Reputation: 1

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

Upvotes: 0

Luca Fagioli
Luca Fagioli

Reputation: 13349

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

Upvotes: 4

eddy
eddy

Reputation: 4413

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

Upvotes: 8

Nick Craver
Nick Craver

Reputation: 630389

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.

Upvotes: 3

Related Questions