How can I use jQuery to check all inputs for blanks?

Question

I am trying to use JQuery to check whether all inputs in a form have been filled. The viewer clicks a button and if the inputs have been filled, cool stuff happens. But if one of the fields hasn't been filled the viewer needs to get a custom warning message. I think I've almost got it but I need some help.

$(function() {
$("#btn_click").click(function() {
    if( $("input").val() == 0 ) {
    $("form").append('<span class=".warning">You didn\'t fill out all the fields!</span>');
}
    else {
        //Some cool stuff happens
    }
});

});

When I don't fill in any of the inputs, I get the expected behavior with the warning. That's good. However, the "cool stuff" runs if I fill in the first input and leave all the others blank. That's bad. I want the warning to show if any of the inputs are left blank. How can I make JQuery test all of the inputs?

Duplicate of http://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery — antony, Apr 27 '14 at 10:27

score 2 · Answer 1 · answered Apr 27 '14 at 10:36

2

$(function() {
$("#btn_click").on('click',function(e) {
    e.preventDefault();
    $("input").each(function(){
        if(!$(this).val()){
           //error message
            return false;
        }else{
           //remaining code
       }
    });
  });
});

answered Apr 27 '14 at 10:36

chandu

2,276
3
20
35

This almost works but now when I type something in the first input, leave the others blank and click the button, the error message fires AND the remaining code fires. I tried giving all the inputs on this specific form a class in HTML and doing $('.required'), same behavior. – user3502199 Apr 27 '14 at 21:55

score 1 · Answer 2 · answered Apr 27 '14 at 10:28

1

You can add ID to each input element and then Using Jquery check if any one is blank then show error message otherwise do your cool stuff

answered Apr 27 '14 at 10:28

ashishmaurya

1,196
10
18

I would do this except I'm writing the script to act on whichever html document happens to be live on the site. The number of input elements changes depending on which HTML document is live, so I really need to somehow be able to check whichever input elements happen to be there. – user3502199 Apr 27 '14 at 21:02

score 0 · Answer 3 · answered Apr 27 '14 at 10:28

$('input').val() will only retrieve the value of the first input. If you want to check all the input, you should check all input with each (just an example, you can use others stuff) :

$('btn_click').on('click', function (e) {
    e.preventDefault(e) ;
    var allOk = true ;
    $('input').each(function () { // Iterate over input
        if (!$('input').val()) { // Don't check against 0
            allOk = false ; // If the input isn't ok
        }
    }) ;
    if (!allOk) {
        // Warning message
    }
    else {
        // Some cool stuff
    }
}) ;

I tried this code and it behaves the same way as the code I started the post with. It seems to only test the first input. When I fill the first input, leave the others blank and click the button, the "cool stuff" still happens. — user3502199, Apr 27 '14 at 20:58

score 0 · Answer 4 · answered Apr 27 '14 at 10:28

0

try $("input").filter(function(){return this.value==''}).length > 0

or bettter, as you already are using jQuery use some sophisticated validation plugin

answered Apr 27 '14 at 10:28

Valerij

27,090
1
26
42

score 0 · Accepted Answer · answered Apr 27 '14 at 10:28

0

You could check it using:

if ($("input").length != $('input').filter(function () {
        return $.trim(this.value)
    }).length) {
    /* not all inputs filled */
}

answered Apr 27 '14 at 10:28

A. Wolff

74,033
9
94
155

How can I use jQuery to check all inputs for blanks?

5 Answers5