Can I preventDefault(); inside of an ajax callback?

Question

I\'m doing some form validation, and I\'m having trouble with what I\'m trying to accomplish. I want to be able to validate my zip code on blur of the field, but also call t

Answer 1

You need to prevent the event's default action before it's bubbled up and handled by the browser. $.getJson returns control and allows the validateZipCode function to finish first, so you need to do this:

function validateZipCode(event){
    event.preventDefault(); //stop the form from being submitted
    $.getJson(
        url,
        params,
        function(data){
            if(data.response === false){
                someError.show();
            }
        }
    );
}

$('#someForm').submit(function(event){
    validateZipCode(event);
});

$('#zipInput').blur(function(event){
    validateZipCode(event);
})

Answer 2

No, without using the ajax() method and setting async to false, you can't return anything from your ajax request.

A better idea would be to always prefent default on your submit, and then manually submit the form in the ajax callback.

Answer 3

No, by the time the callback from the AJAX event fires, the event will have already bubbled and the form submitted. One way you could accomplish this is cancel the form from submitting and then submit it manually if it passes the requirements from the AJAX request.