Question

Possible Duplicate:
jquery ajax call taking too long or something

for some reason this ajax call

        $('#new_user').submit(function(e){
            $.ajax({
                type: 'post',
                url: "/validate_paypal",            
                dataType: 'json',
                async: false,
          data: {email : $('#user_paypal_email').val()},
              success: function( data ) {
                if (data.response["valid"] == false){
                        $('#user_paypal_email').closest('.field').addClass('fieldWithErrors');
                        $('.error_messages').remove();
                        $('<span class="error_messages" style="color:#E77776;margin-left: 10px;">This is not a valid paypal email address</span>').insertAfter('#user_paypal_email');
                        return false;
               }
                }
        });

});

is still submitting the form even after prints out my error and my return false….why is that

Answer 1

$.ajax is a function call which defines an AJAX callback then and the .submit function ends. Separately (asynchronously) the AJAX call is made and your success function then returns false to basically nothing since .submit has already finished.

What you really want to do is halt the form submission process, waiting for the AJAX call to finish, then decide if it should continue. This can be achieved by completely stopping the form submission the first time, then manually resubmitting it once you’ve got the AJAX callback. Of course the trick is how do you know it’s valid? You could throw a value on the submit element.

Example:

$('#new_user').submit(function(e){
    var submitElem = $(this);

    // Check for previous success
    if (submitElem.data('valid') !== true) {
        $.ajax({
            type: 'post',
            url: "/validate_paypal",            
            dataType: 'json',
            async: false,
            data: {email : $('#user_paypal_email').val()},
            success: function( data ) {
                if (data.response["valid"] == false) {
                    $('#user_paypal_email').closest('.field').addClass('fieldWithErrors');
                    $('.error_messages').remove();
                    $('<span class="error_messages" style="color:#E77776;margin-left: 10px;">This is not a valid paypal email address</span>').insertAfter('#user_paypal_email');
                    return false;
                } else {
                    // If successful, record validity and submit (allowing to continue)
                    submitElem
                        .data('valid', true)
                        .submit();
                }
            }
        });    
        return false;
    } else {
        // Fall through
        return true;
    }
});