Check all file inputs for content

Question

I'm trying to cycle through all file inputs with the class of .ruFileInput each time there is a change to one of the inputs.

If they are all filled I would like to do something - in this example alert("No Empty Fields!!");

The issue is that the message pops every time a file input changes instead of alerting once they are all filled. Any suggestions?

$('input.ruFileInput').live('change' , function () { 
    $("input.ruFileInput").each(function() {
        if($(this).val() != ""){
            alert("No Empty Fields!!");
        }
    });
});

The original answer I went with was removed for some reason. Using that answer and the suggestion from @gdoron of removing live I ended up with:`$('.uploadcontrolx').on('change', 'input.ruFileInput', function () { var x = $("input.ruFileInput").filter(function(){ return $.trim(this.value) == '' }).length; if(x == 0){ alert('no empty boxes'); } });` — Rob, Jan 29 '13 at 21:16

score 1 · Answer 1 · answered Jan 29 '13 at 20:30

1

var doesEmptyExist = $("input.ruFileInput").filter(function(){
    return this.value === "";
}).length > 0;

Note live is deprecated since 1.7 and was removed in 1.9, stop using it!

$('#containerId').on('change', 'input.ruFileInput', function(){
    var doesEmptyExist = $("input.ruFileInput").filter(function(){
        return this.value === "";
    }).length > 0;

    if (!doesEmptyExist)
        alert('no empty boxes');
});

answered Jan 29 '13 at 20:30

gdoron

147,333
58
291
367

Anyone care to run a speed test between this and my answer? I'm curious to see if pure jQuery selectors are always faster or not. This should be pretty fast. +1 for not turning `this` into a jQuery object simply to check the value like some other people :P – crush Jan 29 '13 at 20:41

score 1 · Answer 2 · answered Jan 29 '13 at 20:33

1

Simply with the jQuery selector:

if ($('input.ruFileInput[value=""]').length == 0) {
    alert("No empty Fields");
}

answered Jan 29 '13 at 20:33

crush

16,713
9
59
100

Just make sure to trim the values beforehand. – Boaz Jan 29 '13 at 20:35
If he has to trim the values, then they aren't actually empty, are they? I mean, how do they end up with white space if a file path wasn't selected? – crush Jan 29 '13 at 20:35
I agree. Not likely in the case of file input. But as a general rule of thumb, as this may apply to any input element. – Boaz Jan 29 '13 at 20:37
I won't downvote, but it's wrong, you shouldn't use attribute selector for value, it doesn't work. – gdoron Jan 29 '13 at 21:02
What do you mean it doesn't work? Selector attribute for value absolutely does work. – crush Jan 29 '13 at 21:05

score 0 · Answer 3 · answered Jan 29 '13 at 20:31

Try to set a boolean value instead of alerting in the .each loop.

$('input.ruFileInput').live('change', function () {
    var isEmpty = false;
    $("input.ruFileInput").each(function () {
        if ($(this).val() != "") {
            isEmpty = true;
            break;
        }
    });
    if (!isEmpty) {
        alert("No Empty Fields!!");
    }
});

Check all file inputs for content

3 Answers3