Jquery form check returns true, but need to return

Question

I am running this form check when the form is submitted:

if((formData[4].value == 1 || formData[4].value == 2) && !formData[2].value) { 
    alert('Please fill out the key field');
    return false;
} else {
    $.ajax({
        url: "/ajax/key_check.php",
        cache: false,
        data: "key=" + formData[4].value,
        dataType: "html",
        success: function(data) {
            if(data == 1) {
                alert('Key already exists');
                return false;
            }
        }
    });

    return true;
}

The script works, it alerts key already exists if data does == 1, however the form still submits. I thought by returning false if data == 1 would stop the form from processing, however it continues and adds the key anyway and popups up key already exists message. How can I stop the form from submitting if data == 1? I tried even doing this:

if(data == 1) {
    alert('Key already exists');
    return false;
} else {
    return true;
}

Then removed the return true at the bottom of the script, but the same issue happens. Pop up comes up but the form still gets processed.

Answer 1

The problem is that the AJAX request happens asynchronously — it calls your success function after the outer function returns true. It is the success function (not your outer function) returning false, which has no bearing on whether the form will submit or not.

You will have to always return false from that outer function, and then in the AJAX success function, if the validation succeeds, unbind the initial submit handler and use the .submit() method of the form to submit the form normally:

(In these code samples, I assume that form is a jQuery object that wraps the underlying DOM element of the form.)

success: function(data) {
    if(data == 1) {
        alert('Key already exists');
    } else {
        form.unbind('submit'); // Prevent the AJAX validation from happening again
        form.submit(); // Submit the form normally
    }
}

Alternatively, you can call the browser's native form.submit() method and the "unbind" line will not be necessary:

form[0].submit();

Answer 2

A return in the callback returns from that callback, not the parent function like you want...however you can get the effect you want, like this:

if((formData[4].value == 1 || formData[4].value == 2) && !formData[2].value) { 
    alert('Please fill out the key field');
    return false;
} else {
    $.ajax({
        url: "/ajax/key_check.php",
        cache: false,
        data: "key=" + formData[4].value,
        dataType: "html",
        success: function(data) {
            if(data == 1) {
                alert('Key already exists');
            } else {
              $("#someForm")[0].submit();
            }
        }
    });
    return false;
}

What this does is never submit directly, but if the check is ok, calls the *native .submit() method, submitting the form and not running this handler again.