Problem with ajax return value to a function

i am trying to return value from ajax request to a function on form submit.

The code 开发者_如何学Gois as below:

function validateEmail(){ 
        if(email.val() == "")
        {
            $("#emailerror").html("Enter Email...");
            return false;
        }
        else {
        $.ajax({
            type: "POST",
            data: "email="+email.val(),
            url:'emailcheck.php',
            beforeSend: function(){
                $("#emailerror").html("Checking Email...");
            },
            success: function(data){
                if(data == "invalid")
                {
                    $("#emailerror").html("Invalid Email");
                    return false;
                }
                else if(data != "0")
                {
                    $("#emailerror").html("Email Already Exist");
                    return false;
                }
                else
                {
                    $("#emailerror").html("OK");
                    return true;
                }
            }
        });
        }
    }

On form submit, i am calling the function and checking the return value from ajax response:

$('#myForm').submit(function(){
        if(validateEmail())
        {
            alert('returning true');
            return true;
        }
        else
        {
            return false;
        }
});

But, the code is not executed when the return value is 'true'. The function validateEmail() return false.

Pls help me to figure out where i went wrong..

Thanks in advance.

The "A" in AJAX stands for "asynchronous".

In the else branch of validateEmail, you're launching an asynchronous request to emailcheck.php. validateEmail will return before your PHP file responds; then your emailcheck.php script does respond, jQuery will call your success callback but no one will pay attention to what it returns. The result as far as form validation is concerned, is that your validateEmail looks like this:

function validateEmail() { 
    if(email.val() == "") {
        $("#emailerror").html("Enter Email...");
        return false;
    }
    else {
        // Your $.ajax() might as well not even be here as
        // validateEmail will return before $.ajax() gets a
        // response from emailcheck.php
        return;
    }
}

You could try the async:false option for $.ajax or rework all your logic to be able to wait for the asynchronous request to return.

Furthermore, the second branch of validateEmail does not return false, it doesn't return anything at all but that's still not a true value.

if(data == "invalid")
            { // id data = invalid it good
                $("#emailerror").html("Invalid Email");
                return false;
            }
            else if(data != "0") //if data == good it work :) it is error
            {
                $("#emailerror").html("Email Already Exist");
                return false;
            }
            else
            {
                $("#emailerror").html("OK");
                return true;
            }

Maybe like this:

if(data == "invalid")
            { // id data = invalid it good
                $("#emailerror").html("Invalid Email");
                return false;
            }
            else if(data == "good") //if data == good it work :) it is error
            {
                $("#emailerror").html("OK");
                return true;
            }
            else
            {
                $("#emailerror").html("Email Already Exist");
                return false;
            }

I believe the problem is that you get undefined as return value from your call to validateEmail(). That is because your ajax request is done asynchronous and the validateEmail() function exits before you get the result. One solution (a bad in my opinion) would be to set the option async to false in the ajax request.

$.ajax({
        type: "POST",
        data: "email="+email.val(),
        url:'emailcheck.php',
        async: false,
        beforeSend: function(){
            $("#emailerror").html("Checking Email...");
        }

Otherwise I would recommend this. Whatever trigger your submit call you could trigger validateEmail() instead and then call submit from there.

validateEmail(); //Instead of trigger submit you call this function.    

function validateEmail(){ 
    if(email.val() == "")
    {
        $("#emailerror").html("Enter Email...");
        return false;
    }
    else {
    $.ajax({
        type: "POST",
        data: "email="+email.val(),
        url:'emailcheck.php',
        beforeSend: function(){
            $("#emailerror").html("Checking Email...");
        },
        success: function(data){
            if(data == "invalid")
            {
                $("#emailerror").html("Invalid Email");
                return false;
            }
            else if(data != "0")
            {
                $("#emailerror").html("Email Already Exist");
                return false;
            }
            else
            {
                $("#emailerror").html("OK");
                $('#myForm').submit(); //Here you trigger submit.
                return true;
            }
        }
    });
    }
}

Probably you got other validation functions but I think you will be able to manage that also.