JavaScript check of a form, not waiting for AJAX response

Question

this is a part of the check in my form

function check(theform) {
var re = /^\w[0-9A-Za-z]{5,19}$/;
if (!re.test(theform.username.value)) { 
    alert("not valid username");
    theform.username.focus();
    return false;
}

$.ajax({
    type: "POST",
    url: "username.asp",
    data: "username="+theform.username.value,
    success: function(msg){
        username = msg;
        if (!username) {
            alert("username already in use");
            return false;
        }
    }
});

var re = /^\w[0-9A-Za-z]{5,19}$/;
if (!re.test(theform.password.value)) { 
    alert("not valid password");
    theform.password.focus();
    return false;
}
}

for some reason of sync... it check the username then duplicated username with the ajax and not waiting for respond and jump to the password check.

i don't want to insert the rest of the code to isreadystate (or what ever it is) because i might move the username duplicate check to the end... and then the function will end before the ajax anyway

what should i do?

Answer 1

I would put your regex test within your ajax success handler.

If the username is valid, run your password test.

You could also set

async: false

within your $.ajax() call.

Answer 2

The first A in AJAX stands for "Asynchonous". The call is made, and the execution of the function continued without waiting for the call to return.

You could set the async option in your call to false, making your call sychronous. However, you would have to change your functions so the return false makes it through to the check function, and it is not recommended by the jQuery manual:

The first letter in Ajax stands for "asynchronous," meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.

a better way around it would be to make the checks you can make in "real time" within the function, then start the Ajax request, and submit the form in the success callback of that request.

---

2nd attempt at a syncrhonous call. This seems to actually work - tested in FF 3.6.

var name_success = true;

$.ajax({
    type: "POST",
    async: false,
    url: "username.asp",  // Needs to return "EXISTS" in this example 
    data: "username="+theform.username.value,
    success: function(msg){
        username = msg;
        if (username == "EXISTS") {  // Changed callback return value - 
                                     // safer this way
            alert("username already in use");
            name_success = false;   // should work because
                                    // we're in check()'s scope
            return false;
        }
    }
});

alert (name_success);

Answer 3

your code will first make user name test, if success, it will make ajax call, as the ajax call is asynchronous, the code execution continues to the password check.

the return false inside teh following code does not makes any sense as the success is a call back method when ajax call completes successfully.

success: function(msg){
    username = msg;
    if (!username) {
        alert("username already in use");
        return false;
    }
}

Add async: false as shown in the code to make it a synchronous call,