Return False not working inside jQuery.ajax

前端 未结 7 1900
再見小時候
再見小時候 2021-02-08 17:38

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

7条回答
  •  有刺的猬
    2021-02-08 18:13

    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.

提交回复
热议问题