CODEWITHSUNDEEP
javascriptjqueryjquery-validate
J.K.A.
J.K.A.

Reputation: 7404

Validating multiple "array named" file inputs and dropdowns in JQuery Validate

I have search lot of about this but haven't found any solution. I want to validate multiple array named file inputs and dropdowns in JQuery validate.

<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>

I have added JQuery Validate Code like this:

$("#formname").validate(
    {
    rules:{
        times:{required:true, digits:true}
    }}
    );

But its only validating first input and showing error message there only whether 2nd or 3rd input field entered or not.

I don't want to change this "times[]" name because functionality is depending on this. Only I want validation using JQuery validate.

Is there any trick available for this?

Any help would be appreciated.

Thanks

Upvotes: 1

Views: 838

Answers (1)

Barmar
Barmar

Reputation: 780688

The plugin doesn't handle fields with the same name well. Here's how I solved it in my application.

I gave all the repetitive fields distinct names, and put the validation method names in the class.

<td> <input type="text" class="times required digits" name="times[0]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[1]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[2]" /> </td>
</tr>

You can remove the indexes before submitting with code like this:

$("#formname").validate({
    ...
    submitHandler: function(form) {
        $(form).find(":input[name*='[']").each(function() {
            this.name = this.name.replace(/\[\d+\]/, '[]');
        }
        form.submit();
    }
});

Upvotes: 1

Related Questions