Jquery loop form to check for all empty fields then execute a function

Question

I'm trying to loop form to check for empty field and then execute and function. I'm currently using something like this below that I found on this website but what is happening that the each loop check 1 field and see 1 that not empty and still execute else function. I think I need to check all at once then execute next function. How could I achieve this?

if($('.enter-info--ownerInfo .req').val() != "") {
   alert("Empty Fields!!")
    } else {
    run this function
    }

Thanks...

You need to check each field, you can't do this with a single selector. — user229044, May 22 '13 at 13:44

score 10 · Accepted Answer · answered May 22 '13 at 13:45

10

Use filtering, it is easy:

var anyFieldIsEmpty = $("form :input").filter(function() {
        return $.trim(this.value).length === 0;
    }).length > 0;

if (anyFieldIsEmpty) {
    // empty fields
}

DEMO: http://jsfiddle.net/Lz9nY/

answered May 22 '13 at 13:45

VisioN

143,310
32
282
281

1

Any reason to use length instead of: $.trim(this.value) === "" ? – A. Wolff May 22 '13 at 13:48
1

It could probably even be `return !$.trim(this.value);` – Ian May 22 '13 at 13:49
@Ian It couldn't be that. Remember about "0". – VisioN May 22 '13 at 13:50
@roasted Just because I like `length` property, nothing more `;)` – VisioN May 22 '13 at 13:50
@VisioN Ok, seems fair ;) – A. Wolff May 22 '13 at 13:51
2

@VisioN Not true. Try it :) `"0"` is truthy - the only falsey string is `""`. It's different when **comparing to** a boolean – Ian May 22 '13 at 13:51
@VisioN As soon as you said no, I got really confused, so I had to go try it and make sure :) – Ian May 22 '13 at 13:53
@Ian You also puzzled me with that `:)` These falsy-tricks are always mixed up in my head. – VisioN May 22 '13 at 13:56
Thanks VisioN just what I been looking for. – ifelse May 22 '13 at 13:58
@VisioN I know, me too! Sometimes it's better to be explicit and easier to read - you probably have less problems/confusion, and it gets the same job done – Ian May 22 '13 at 14:00
@Ian Yup! That's why I haven't edited the answer -- it should be easier for the OP to get the idea. But regarding `x === ""`, I don't know why, but for me `x.length === 0` looks very much better `:)` – VisioN May 22 '13 at 14:02
@VisioN Oh absolutely, I didn't intend for you to swap it in your answer; keeping it in the comments is right :) – Ian May 22 '13 at 14:04
1

@Ian Haha! Regarding these JS-tricks, I just remembered that [question](http://stackoverflow.com/a/16036784/1249581). After all we should be professors here, but still are mixing the things `:)` – VisioN May 22 '13 at 14:06
@VisioN Oh wow! I didn't know anyone ever answered it! I swear the last time I saw that, we were still going back and forth in the comments, and I thought there would be no way. Thanks for bringing that up, in any case! – Ian May 22 '13 at 14:11
@Ian I have found that question absolutely accidentally while searching for something really different. Imagine my surprise when I read the question about the snippet from my profile! I just decided to give a small clarification, which finally brought us to several new JS obfuscators `:D` – VisioN May 22 '13 at 14:15

score 2 · Answer 2 · answered May 22 '13 at 13:45

2

$('.enter-info--ownerInfo .req').each(function() {

  if ($(this).val() == "")
  {
     alert("empty field : " + $(this).attr('id'));
  }

});

answered May 22 '13 at 13:45

bcolin

438
3
6

score 1 · Answer 3 · answered May 22 '13 at 13:46

Start by selecting all your fields:

var fields = $('.enter-info--ownerInfo .req')

Then filter them down to the ones with an empty value:

fields.filter(function() {
    return this.value === '';
});

Then check the length property of the resulting object. If it's equal to 0 then all fields have a value, otherwise you execute your function.

if(fields.length === 0) {
    // no empty fields
}
else {
    // empty fields
}

score 0 · Answer 4 · answered May 22 '13 at 13:45

You can use a loop and flag:

var valid = true;
$('.req').each(function () {
    if ($(this).val() == '') {
        valid = false;
        return false;
    }
});

if (valid) {
    // all fields are valid
}

score 0 · Answer 5 · answered May 22 '13 at 13:45

You can use .filter method to reduce the elements to those matching your criteria:

if $('.enter-info--ownerInfo .req').filter(function () {
  return $.trim($(this).val()) == ""
}).length > 0) {
  alert("One or more fields are empty")
} else {
  // run this function
}

Jquery loop form to check for all empty fields then execute a function

5 Answers5

Linked