How to validate array of inputs using validate plugin jquery

I noticed that the jQuery validate plugin i use will only detect the first element with a specific name.

Another way to make the jQuery validate plugin also detect all the inputs beyond the first could be by making the names unique. So you could replace:

<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />
<input type="text" name="qty[]" />

with:

<input type="text" name="qty[0]" />
<input type="text" name="qty[1]" />
<input type="text" name="qty[2]" />
<input type="text" name="qty[3]" />

You can pass an option in to ignore part of a field name; As for the original posts comments, there are plenty of use-cases for having a name[] style name in HTML, especially using PHP.

$("#my-form").validate({
  submitHandler: function(form) {
    form.submit();
  },
  ignore: [],
  rules: {
    'category[]': {
      required: true
    }
  }
});

Sometimes we need to validate an array of input elements: For example –

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
    $(document).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:

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

I just got this solution from http://www.codeboss.in/web-funda/2009/05/27/jquery-validation-for-array-of-input-elements/ hope this helps someone..