Form submit callback returning multiple times? And how to create a function for a null value in another function?

Question

Sorry for the double question, I'm encountering a few issues as I try to crack this password change form. This is a follow on from my previous question here about submitting a form only if the 'if' statements return true.

I have a keyup function that runs through if/else statements to check that a password conforms to a number of requirements. For example, if it is longer than 7 characters, if it contains a capital letter, if it contains 2 numbers etc. I have created a global variable 'rtnTrue = 1' that I set as 0 on the else statements inside the keyup function (if they fail one of the requirements then rtnTrue = 0). So the theory is that if rtnTrue = 1, then the form can be submitted, otherwise it can't.

I have 2 problems:

1. Even with the variable global, I still need to set another rule on the submit action because the rtnTrue will only happen when the user types something in the password input box. E.g. if they just press submit without typing anything, then rtnTrue = 1 anyway so it'll submit. I need something along the lines of pwd.length == 0 but I'm not too sure how to do that because of this variable being inside the keyup function?
2. If I type something incorrect in the box and click submit, my callback alert is showing up 3 times and I don't know why!

Here's my JS code and I've created a JSFiddle here because it's quite long!

var rtnTrue = 1;

$('#password-info').hide();

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

    // keyup code here
    // 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');
        rtnTrue = 0;
    }

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

    // validate repeated letters (none repeated more than twice)
    if ( /([A-Za-z])(.*?\1){2}/.test(pwd) ) {
        $('#letter .repeated').removeClass('valid').addClass('invalid');
        $('#letter').addClass('invalid-repeated');
    } else {
        $('#letter .repeated').removeClass('invalid').addClass('valid');
        $('#letter').removeClass('invalid-repeated');
        rtnTrue = 0;
    }

    // validate capital letter
    if (pwd.match(/[A-Z]/)) {
        $('#capital').removeClass('invalid').addClass('valid');
    } else {
        $('#capital').removeClass('valid').addClass('invalid');
        rtnTrue = 0;
    }

    // validate number
    if ( /([^\d]*[\d]){2,}/.test(pwd) ) {
        $('#number').removeClass('invalid').addClass('valid');
    } else {
        $('#number').removeClass('valid').addClass('invalid');
        rtnTrue = 0;
    }

    // validate repeated numbers (none repeated more than twice)
    if ( /([\d])(.*?\1){2}/.test(pwd) ) {
        $('#number .repeated').removeClass('valid').addClass('invalid');
        $('#number').addClass('invalid-repeated');
    } else {
        $('#number .repeated').removeClass('invalid').addClass('valid');
        $('#number').removeClass('invalid-repeated');
        rtnTrue = 0;
    }

    passwordFormSubmit(); // New Function

}).focus(function() {
    // focus code here
    $('#password-info').slideDown('fast');

}).blur(function() {
    // blur code here
    $('#password-info').show();
});

function passwordFormSubmit() { 

    var local = rtnTrue;

    if (rtnTrue==1) {
        $('#form-password-change').submit(function(){
            return true;
        });
    }else {
        $('#form-password-change').submit(function(){
            alert(rtnTrue);
            return false;
        });
    }
}

Answer 1

If you do want some quick ways to achieve your goal, I modified your JSFiddle. Try using true / false instead of 0 or 1. And you are currently trying to submit the form every time the user types. You will see what I did in JSFiddle.

And try setting the first variable to false, so that if the user click submit button with no input, it will not submit.

http://jsfiddle.net/ZncQx/22/

var passwordFine = false;

Answer 2

Start by modulizing your code and defining your vars and expanding your process bit:

(function()
{
   var bPasswordValid = false;
   var txtInput       = $('selector');
   var btnSubmit      = $('selector');

   txtInput.data("IsValid", false);

   txtInput.on("change", Validate); // Setting to change instead of keyup should optimize your code unless you are stripping values if they are not valid
   btnSubmit.on("click", ValidateAll); // Setting to click could be replaced by someForm.on("submit", ValidateAll) if enter key is not caught by click handler

   var Validate = function(oEvent) 
   {
      // Check if the input is valid
      var sVal = $(this).val();

      if (sVal /* passes validation */ )
         txtInput.data("IsValid", true);
   } 

   var ValidateAll = function(oEvent)
   {
      if ( txtInput.data("IsValid") )
         return;
      else 
      {
         // Do some validation msg stuff
         return false; // prevent form from being submitted
      }
   }
}())

This should give you a good push in the right direction, and here a fiddle to see a mostly working module