How to validate array of inputs using validate plugin jquery

by

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="https://stackoverflow.com/questions/24670447/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..

More Related Contents:

  1. How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?
  2. jQuery validate: How to add a rule for regular expression validation?
  3. Validate that end date is greater than start date with jQuery
  4. jQuery Validate – require at least one field in a group to be filled
  5. jQuery Validation Plugin – adding rules that apply to multiple fields
  6. jQuery Validate Required Select
  7. jQuery validator and a custom rule that uses AJAX
  8. jQuery validate dynamic input array
  9. Unobtrusive validation in Chrome won’t validate with dd/mm/yyyy
  10. jQuery Validate plugin – password check – minimum requirements – Regex
  11. How can we specify rules for jQuery validation plugin by class?
  12. override jquery validate plugin email address validation
  13. how to test Recaptcha with jQuery Validate plugin
  14. jQuery Validation – Two fields, only required to fill in one
  15. Jquery Validation for Dynamically Created Fields
  16. onkeyup and onfocusout is not working in jQuery Validate
  17. jQuery Validation plugin won’t validate when in click event handler of
  18. Limit number of characters in input field
  19. select2 and jquery validation not working properly
  20. Validate dynamic field jquery
  21. Ignore all hidden div but not one in jQuery validation
  22. JQuery Validate multiple fields with one error
  23. How to make select2 work with jquery.validation plugin?
  24. jquery validation: prevent form submit
  25. Manually set unobtrusive validation error on a textbox
  26. Validating array inputs using jquery validation plugin
  27. MVC 4 client side validation not working
  28. jQuery validator and datepicker click not validating
  29. jquery validation not waiting for remote validation to return true, considers form valid
  30. How to include JavaScript files by h:outputScript? [duplicate]

Leave a Comment