JQuery Check Input File

Question

I have file input fields in a group like below. I'd like all of them to be required fields.

<!-- file upload group -->
<div class="Fieldset FileUpGroup">
  <span class="Legend">File Upload Group: (required)</span>
  <input name="fileUploads[]" type="file">
  <input name="fileUploads[]" type="file">
  <input name="fileUploads[]" type="file">
</div>

I have the following JQuery to validate, but it only validates the first one.

$('.FileUpGroup').each(function() {
    if($(this).find('input[type=file]').val() == '') { 
        Response('- Upload file not selected!', true);
        $(this).addClass('Error').fadeOut().fadeIn();
        return false;
    }
    else {
        $(this).removeClass('Error');
    }
});

Thank You!

SeanCannon · Accepted Answer · 2011-12-25 07:31:10Z

11

You're using each() on the wrong element:

$('input[type="file"]').each(function() {
    var $this = $(this);
    if ($this.val() == '') { 
        Response('- Upload file not selected!', true);
        $this.addClass('Error').fadeOut().fadeIn();
        return false;
    } else {
        $this.removeClass('Error');
    }
});

answered Dec 25, 2011 at 7:31

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

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

Comments

Dave S. · Accepted Answer · 2013-07-19 13:25:05Z

0

.val() only returns the first value.
In your loop ($('.FileUpGroup').each) is only activated for one item... the DIV.FileUpGroup element.
$('.FileUpGroup input[type=file]') will find all the items and then iterates them one at a time
Here is an example. Hope I have been useful.

$('.FileUpGroup input[type=file]').each(function() {
    if($(this).val() === '') {
        // wabba dabba do
    }
    else {
        // badda bawwa do
    }
});

edited Jul 19, 2013 at 13:25

Dave S.

6,42934 silver badges36 bronze badges

answered Dec 25, 2011 at 7:36

marxus

4622 silver badges6 bronze badges

Collectives™ on Stack Overflow

JQuery Check Input File

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related