Returning false in Javascript/Jquery within an if statement...

Question

Hi guys,

I've got this function to check my form:

function checkFrm() {
    $.each($('select'), function() {
     var $this = $(this);

     if( $this.val() === 'null') {
      // do nothing
     } else {
      if($this.next('input').val().length < 1) {
       return false;
      }
     }
    });
}

When the user submits this, it runs this code, and ideally if the criteria is met the form won't submit because of the 'return false;' bit.

However, for some reason it's completley ignoring this!

If I set a return variable at the start like 'var toreturn = true;' then set 'toreturn = false' when the trigger is hit, then 'return toreturn;' right at the end it stops the form submitting just fine... however that's not much use, as the alerts and checks I run in between are all triggered at once which would be completely overwhelming for the user.

Any suggestions please?

Cheers :)

Answer 1

Returning false from the each will not return false from the function.

You will need to set a var to return false from the function also. You can still break out of the each by using return false as soon as your condition fails.

function checkFrm() {
    var retVal=true;
    $.each($('select'), function() {
        var $this = $(this);

        if( $this.val() === 'null') {
                // do nothing
        } else {
                if($this.next('input').val().length < 1) {
                        //set the var to return from the function
                        retval = false; 
                        //exit out of the each
                        return false;
                }
        }
    });
    return retVal;
}

Answer 2

When you call return false; it refurns false for the function

function() {
        var $this = $(this);

        if( $this.val() === 'null') {
                // do nothing
        } else {
                if($this.next('input').val().length < 1) {
                        return false;
                }
        }
    }

That is not work for you. You better get an array of selects like this:

var selectsArray=document.getElementsByTagName("select");

and work with them in a loop.

for(var i=0; i< selectsArray.length;i++){
      if( selectsArray[i].value === 'null') {
                // do nothing
        } else {
                if(selectsArray[i].next('input').val().length < 1) {
                        return false;
                }
        }
}