correct javascript pre-check approach for a "change password" dialog

Question

This question is not about security or "how to correctly implement" related issues, it's about the concept of pre-checking entered values.

As a first approach, I tried to implement following procedure (note that at every check if statement, the method returns a identifier value if false, else the algorithm continues)

Save entered values in oldPW, newPW1, newPW2
check if oldPW is correct (Ajax request)
    check if newPW1 == newPW2
        check if length of newPW1 is >=6
            check if newPW1 contains legal characters
                check if newPW1 contains required characters (like at least one uppercase char etc.)

This approach caused issues, and I think its related to the asynchronuous ajax request. I return a specific identifier integer, and called the method like

switch(checkPasswords(oldPW, newPW1, newPW2){
    case 0:
        // alert something suitable
        break;
    case 1:
        // alert something suitable
        break;

    //(...)

    case n-1:
        // alert something suitable
        break;
    case n:
        // everything is ok, change password
        break;
}

Is it cleaner to check the old password at the end? Or even directly when trying to change the password (assumed the new desired password fullfills the requirements) and as a consequence to have only one ajax request? What is the common concept?

Answer 1

I would personally recommend separating the Ajax requests by checking the old password when the user leaves the old password input (onblur) and have its own handler / success function and a second function to handle the actual changing of the password.

given this markup:

<input type="text" id="oldPassword" value="" />
<input type="text" id="newPassword" name="newPassword" value="" />
<input type="text" id="confirmNewPassword" name="confirmNewPassword" value="" />
<input type="button" id="submitButton" value="Reset Password" />

and this (pseudo code)JS:

<script type="text/javascript">
//some doc ready-ish function
$('#oldPassword').blur(function(){
//ajax request to validate the pw
//trigger some success / failure message
//if failure, disable your #submitButton by unbinding the click event or something to that effect 

//if its successful, make sure you're submit button event is bound again
}); 

$('#submitButton').click(function(){
//perform new pw validation 
//submit your reset password request 
});

</script>