Validating array file input

Question

How can I validate an array of file input with jquery.validate plugin?

The code works fine with single file, but not with multiple upload, where name="" is an array.

jQ:

<script type="text/javascript">
    $(document).ready(function(){
        $("#Main").validate({
            rules: {
                pic: { required:true, accept: "jpg|jpeg" }
            }}
        );
    });
</script>

Single upload:

<html>
    <head>
    </head>
    <body>
        ...
        <td>Fotografija 1:</td>
        <td> <input type="file" class="fup" name="pic" /> </td>
        ...
    </body>
</html>

Multiple upload

<html>
    <head>
    </head>
    <body>
        ...
            <td>Fotografija 1:</td>
            <td> <input type="file" class="fup" name="pic[]" /> </td>
        </tr>
        <tr>
            <td>Fotografija 2:</td>
            <td> <input type="file" class="fup" name="pic[]" /> </td>
        </tr>
        <tr>
            <td>Fotografija 3:</td>
            <td> <input type="file" class="fup" name="pic[]" /> </td>
        ...
    </body>
</html>

read this

Simon Dorociak
– Simon Dorociak

2012-05-28 10:50:50 +00:00
Commented May 28, 2012 at 10:50 — Simon Dorociak
– Simon Dorociak, Commented May 28, 2012 at 10:50

Community · Accepted Answer · 2017-05-23 11:56:29Z

0

You can try this:

 $("input.fup").each(function(){
       $(this).rules("add", {
           required:true, 
           accept: "jpg|jpeg"
       });                    
 });

For detail see here

Here is another resource.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered May 28, 2012 at 10:57

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Over a year ago

It still works just for the first file input in my case. Other two ("fotografija1, fotografija2") are not validated. :/

Sparky Over a year ago

It only validates the first input when the name attribute is used multiple times. This plugin requires that naming be unique; there is no workaround! The first question you linked to in your answer is about editing the core of the plugin itself.

Sparky Over a year ago

Answer should be fixed or deleted. Your first link says to edit the plugin itself, which only proves this cannot be done with this plugin. The second link shows unique names, which is not what the OP is doing here. Finally, read the first comment on this answer above... proof: your solution just does not work when field name is repeated. https://jsfiddle.net/gbxnadwo/

Maxim Pokrovskii · Accepted Answer · 2013-09-16 11:47:17Z

-2

Have some issue here

"pic[]" {your rules}

and

rules("add)

wokring only for first element in array.

===

ok i found out solution: you should fix jquery.validate.js

Find checkForm function

and replace it to:

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

edited Sep 16, 2013 at 11:47

answered Sep 16, 2013 at 11:22

Maxim Pokrovskii

3535 silver badges11 bronze badges

1 Comment

Techy Over a year ago

I have tried to modify the validate.js but it was not working for me

Collectives™ on Stack Overflow

Validating array file input

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related