Break jQuery function execution on failure inside .each() loop

Question

I have the following form

<input class="required" id="name" value="some content"/>
<input class="required" id="address" value=""/>
<input class="required" id="lastname" value="some content"/>

and the following jQuery function. It contains a .each() loop to check some inputs. When the check fails, the function should break and return false.

function check() {
  $('.required').each(function() {
    var input = $(this);
    console.log(input.attr('id'));

    if (input.val() == null || input.val() == '') {
      console.log('*** Failed ***');
      return false;
    }
  });

  console.log('Other code');
  return true;
}

Unfortunately, when I run the code I see the following output:

name
address
*** Failed ***
Other code

The .each() loop correctly stops after the first failure, but the check function seems to keep running. How can I break its execution? Here's a jsFiddle.

You return false from each anonymous function, not from check() — A. Wolff
– A. Wolff, Commented Apr 12, 2016 at 9:00

Somnath Mali · Accepted Answer · 2016-04-12 09:01:35Z

2

function check() {
  var valid = true;
  $('.required').each(function() {
    var input = $(this);
    console.log(input.attr('id'));

    if (input.val() == null || input.val() == '') {
      console.log('*** Failed ***');
      valid = false;
      return false;
    }
  });

  if (!valid) return false;

  console.log('Other code');
  return true;
}

answered Apr 12, 2016 at 9:01

Somnath Mali

463 bronze badges

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

1 Comment

A. Wolff Over a year ago

I give you credit but you should at least explain why it would work (even it is quite comprehensive code)

jackomelly · Accepted Answer · 2016-04-12 09:02:02Z

0

The return false only breaks the $.each statement, but the function go on with the next instruction (console.log('Other code');).

answered Apr 12, 2016 at 9:02

jackomelly

5431 gold badge8 silver badges21 bronze badges

Comments

Giorgio · Accepted Answer · 2016-04-12 09:32:29Z

0

I've found an alternative solution. The idea is to get the .required inputs and then make a classic for loop. This avoids the each() loop and the anonymous function.

function check() {
  var required = $('.required');
  var size = required.size();

  for (var i = 0; i < size; i++) {
    var input = $(required[i]);
    console.log(input.attr('id'));

    if (input.val() == null || input.val() == '') {
      console.log('*** Failed ***');
      return false;
    }
  }

  console.log('Other code');
  return true;
}

edited Apr 12, 2016 at 9:32

answered Apr 12, 2016 at 9:21

Giorgio

1,9706 gold badges41 silver badges70 bronze badges

Collectives™ on Stack Overflow

Break jQuery function execution on failure inside .each() loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related