With multiple 'if else' statements, how do you submit a form only if they all return true?

Question

I have a list of validation requirements for password strength to help users set their passwords, and it's broken into parts so that I can mark each requirement as 'valid' once the user has inputted a valid value in the password input box. (So if they put in a password longer than 7 characters, the password length requirement notice turns green etc). This is working great.

Now, I want to say, if all of the 'if' statements are valid, allow the form to be submitted, otherwise, don't. After reading around, I've made a few attempts at achieving this by setting a variable retVal = true but I'm not quite sure how to use that so have failed in my attempts so far. I also considered doing something like, if all the requirements have the class valid, then allow form submit but that didn't seem like the correct way?

$('#form-password-change #input-password').keyup(function() {

    // set password variable

    var pwd = $(this).val();

    // validate the length

    if (pwd.length > 7) {
        $('#length').removeClass('invalid').addClass('valid');
    } else {
        $('#length').removeClass('valid').addClass('invalid');
    }

    // RegExp
    // validate letter

    if ( /([^a-z]*[a-z]){3,}/i.test(pwd) ) {
        $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').removeClass('valid').addClass('invalid');
    }
});

score 2 · Accepted Answer · answered May 17 '13 at 06:08

2

Try this:

$('#form-password-change #input-password').keyup(function() {

    // set password variable

    var pwd = $(this).val();

    var truetest = 1;
    // validate the length

    if (pwd.length > 7) {
        $('#length').removeClass('invalid').addClass('valid');    
    } else {
       $('#length').removeClass('valid').addClass('invalid');
        truetest = 0;
    }

    // RegExp
    // validate letter

    if ( /([^a-z]*[a-z]){3,}/i.test(pwd) ) {
         $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').removeClass('valid').addClass('invalid');
        truetest = 0;
    }

    if(truetest)
    {
        //Do your stuff here
    }
});

answered May 17 '13 at 06:08

Borniet

3,544
4
24
33

That will return true as long as at least one of the `if` statements is true. OP wants it to only happen if they are all true. – Mark Parnell May 17 '13 at 06:10
Thanks @Borniet. Not sure if a different issue is causing this or if I'm writing something wrong but I tried to fill in the if(truetest) part but it's not quite working for me. `if (truetest) { $('#form-password-change').submit(function(){ return true; }); }else { $('#form-password-change').submit(function(){ return false; }); }` But it's just submitting irrespective. Something to do with it being inside the keyup function? – davidpauljunior May 17 '13 at 06:47
Maybe try if(truetest == 1) for clarity and certainty, and add some alert(truetest); inbetween the code to see if it actually changes, and where you are getting in your script (for instance, if you are more or less sure that one of the earlier if statements should go here or there, add a different alert to both, and you can see what it does. – Borniet May 17 '13 at 07:09
Ok that gets me closer, I can get an alert and return false if I use `if(truetest == 1)`. I've now realised that this form submit will only work when you are typing in the password box because it's within the keyup function. I may have to post another question if I struggle with getting that to work. – davidpauljunior May 17 '13 at 07:18

score 1 · Answer 2 · answered May 17 '13 at 06:08

Try this:-

$('#form-password-change #input-password').keyup(function() {

var IsTrue=true;

// set password variable

var pwd = $(this).val();

// validate the length

if (pwd.length > 7) {
    $('#length').removeClass('invalid').addClass('valid');
} else {
    $('#length').removeClass('valid').addClass('invalid');
   IsTrue=false;
}

// RegExp
// validate letter

if ( /([^a-z]*[a-z]){3,}/i.test(pwd) ) {
    $('#letter').removeClass('invalid').addClass('valid');
} else {
    $('#letter').removeClass('valid').addClass('invalid');
   IsTrue=false
}
return IsTrue;
});

With multiple 'if else' statements, how do you submit a form only if they all return true?

2 Answers2

Linked