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
– user229044 ♦, Commented May 22, 2013 at 13:44

VisioN · Accepted Answer · 2013-05-22 13:45:08Z

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, 2013 at 13:45

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

15 Comments

A. Wolff Over a year ago

Any reason to use length instead of: $.trim(this.value) === "" ?

Ian Over a year ago

It could probably even be return !$.trim(this.value);

VisioN Over a year ago

@Ian It couldn't be that. Remember about "0".

Ian Over a year ago

@VisioN Not true. Try it :) "0" is truthy - the only falsey string is "". It's different when comparing to a boolean

VisioN Over a year ago

@Ian Haha! Regarding these JS-tricks, I just remembered that question. After all we should be professors here, but still are mixing the things :)

|

bcolin · Accepted Answer · 2013-05-22 13:45:34Z

2

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

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

});

answered May 22, 2013 at 13:45

bcolin

4383 silver badges6 bronze badges

Comments

Anthony Grist · Accepted Answer · 2013-05-22 13:46:49Z

1

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
}

answered May 22, 2013 at 13:46

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

user1823761 · Accepted Answer · 2013-05-22 13:45:10Z

0

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
}

answered May 22, 2013 at 13:45

user1823761

Comments

user229044 · Accepted Answer · 2013-05-22 13:45:20Z

0

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
}

answered May 22, 2013 at 13:45

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

15 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

15 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related