Question

I’ve been on a problem for hours without finding any issue…

I have a registration form for users to create accounts. When the submit button is pressed a validateForm function is called.

In this function I do some javascript tests that work, but then I need to verify that the username is available. For this I created an external PHP file and call it using $.ajax.

Here is part of the code :

function validateRegistration(){
// Some tests....

// Check if username is already used
// Call external php file to get information about the username
$.ajax({
    url: 'AjaxFunctions/getUsernameAjax.php',
    data: "username=" + $("#username").val(),
    success: function(data){
        // Username already in use
        if(data == "ko"){
            // Stop validateForm()
        }
        // Username not used yet
        else{
            // Continue tests
        }
    }
});
// Other tests
}

My question is how can I make validateForm() return false from inside the $.ajax ?
Could I for instance declare a js variable before the Ajax part and set it with Ajax ?

I guess the answer is obvious but I’m absolutely new to Ajax and I can’t get it…

Thanks a lot for your help!

Answer 1

To achieve this you can either do a synchronous ajax call like described in this answer, but that’s something which is incredibly dangerous for the performance of your website.

Alternatively – and this is the right way – you should have an external variable whether the username is available, as soon as the user inputs something you do the request and if it’s valid you change the variable otherwise you show an warning message. Next in your validateRegistration() function you only check the external variable (+ possible some form of callback, depending on where you call it from). The advantage being that the user can still continue doing things (like filling out the rest of the form) whilst the request is pending.