Return False not working inside jQuery.ajax

Question

P.S.: Read \"EDITED on 2019-06-29\":

I have a webform for updating user information, and when he updates his email a verification is performed via

Answer 1

You run async code here. At the moment you are trying to return false, it is far to late. Your function already returned undefined. You need to provide a callback if you want to process the result of your success.

Answer 2

$('form').submit(function() {
// we send an AJAX request to validate the unicity of the email
$.ajax({
    url: '/ajax/verify-email.php',
    type: 'POST',
    data: { email: $('#email').val() },
    // we set the context to the form so that inside
    // the success callback 'this' points to the form
    context: this,
    success: function(result) {
        if (result != '1') {
            // If the server send something different than 1
            // we know that the email is unique and trigger
            // the submission of the form using the underlying
            // DOM element to avoid calling the .submit handler
            // recusrively
            this.submit();
        } else {
            // The email is not unique => we are informing
            // the user that the email is already in use
            alert('Another user is using this email');
            $('#email').focus();
        } 
    }
});

// we cancel the normal submission of the form    
return false;

});

Answer 3

Seems like you don't realy get the idea jQuery. You don't need to use return false, and not there. You can call event.preventDefault();:

$('#form').submit(function(event) {
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) {
        if (d == '1') {
            alert('Another user is using this email');
            $('#email').focus();
        }
    });

    event.preventDefault();
});

See this example.

Answer 4

The A in AJAX is actually very important. It stands for Asynchronous. This means that you trigger a request to the server which might take some time to process and you get a response later. This response happens inside the success callback. But since this happens much later than the actual form submission, your form has actually been already submitted before the response comes back. So returning false from an AJAX success callback makes no sense whatsoever. What you want to do is to return false from the submit handler of your form. Let's see how we could implement this.

You could subscribe to the .submit handler of the form and send an AJAX request to verify whether the email has already been taken or not and if it is not taken manually trigger the submission of the form inside the success AJAX callback:

$('form').submit(function() {
    // we send an AJAX request to validate the unicity of the email
    $.ajax({
        url: '/ajax/verify-email.php',
        type: 'POST',
        data: { email: $('#email').val() },
        // we set the context to the form so that inside
        // the success callback 'this' points to the form
        context: this,
        success: function(result) {
            if (result != '1') {
                // If the server send something different than 1
                // we know that the email is unique and trigger
                // the submission of the form using the underlying
                // DOM element to avoid calling the .submit handler
                // recusrively
                this.submit();
            } else {
                // The email is not unique => we are informing
                // the user that the email is already in use
                alert('Another user is using this email');
                $('#email').focus();
            } 
        }
    });

    // we cancel the normal submission of the form    
    return false;
});

Also never rely on client side validation. Make sure that you are performing the email is unique check once the form has been successfully submitted to the server. If you are using a SQL database that's easily achieved with a unique constraint on your Email field.

Answer 5

You should not use .submit() on this situation, use a flag system instead, .submit() should only be used for <form> elements.

var email = jQuery('#email').val();
var flag = 0;
jQuery.ajax({
    type : 'GET',
    url : '/ajax/verify-email.php?email=' + email,
    async: false,
    success : function( d ) {
        if( d == '1' ) {
            alert('Another user is using this email');
            jQuery('input[name="email"]').focus();
            flag = 1;
        }
    }
});
if(flag == 1) return false;

Answer 6

you should use event.preventDefault() as shown below.

$('#form').submit(function(event) {
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) {
        if (d == '1') {
            alert('Another user is using this email');
            $('#email').focus();
            event.preventDefault();
        }
    });   
});