jQuery validating multiple input:file

Question

I have the following HTML:

<input id="upload1" type="file" /><br/>
<input id="upload2" type="file" /><br/>
<input id="upload3" type="file" /><br/>
<input id="upload4" type="file" /><br/>
<input id="upload5" type="file" /><br/>
<span id="label" style="color:red; display:none">
Wrong filetype!
</span>

And the following jQuery:

$('input:file').change(function(){
    var ext = $(this).val().split('.').pop().toLowerCase();
    $('#label').toggle(ext != 'pdf');
});

What I want to do, is only toggle the #label if all 5 of the input:file elements pass the validation (pdf extension only). Or no file selected.

At the moment, if i select a .jpg first, the #label displays, then if i select a .pdf the #label disappears. This is incorrect as there is still a .jpg selected in one of the five input:file elements.

EDIT: Fiddle here

Carlos Martinez T · Accepted Answer · 2012-10-05 14:14:35Z

2

What about this?

$('input:file').change(function(){

    $('input:file').each(function(){
      var ext =   $(this).split('.').pop().toLowerCase();

        $('#label').toggle(ext != 'jpg');
    });
});

answered Oct 5, 2012 at 14:14

Carlos Martinez T

6,5481 gold badge36 silver badges40 bronze badges

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

1 Comment

Zathrus Writer Over a year ago

this will hide the actual label if the very last file input is OK, it needs a persistent variable to check for OK value in all fields and react accordingly

Zathrus Writer · Accepted Answer · 2012-10-05 14:14:29Z

1

You would need to change it to:

$('input:file').change(function(){
    var
        all_ok = true,
        inputs_set = $('input:file');

    for (var e in inputs_set) {
        if (e.val().split('.').pop().toLowerCase() != 'pdf') {
            all_ok = false;
        }
    }

    $('#label').toggle(!all_ok);
});

answered Oct 5, 2012 at 14:14

Zathrus Writer

4,3315 gold badges30 silver badges53 bronze badges

1 Comment

general exception Over a year ago

Managed to do it with a variation of this answer. However @Zathrus Writer is correct, a persistent variable needs to be used. Marking this as answered because of this.

general exception · Accepted Answer · 2012-10-08 09:57:46Z

0

Managed to do it with a combination of both answers:-

$('input:file').change(function() {  
    var allok = true;
    $('input:file').each(function() {
        if ($(this).val() !== "" &&
            $(this).val().split('.').pop().toLowerCase() != 'pdf') {
                allok = false;
        }
    });
    $('#label').toggle(!allok);
});

answered Oct 8, 2012 at 9:57

general exception

4,3629 gold badges57 silver badges83 bronze badges

Collectives™ on Stack Overflow

jQuery validating multiple input:file

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related