Question

I want to display an overlay when the user is submitting a form. I’m using $('form').submit(function { [...] }) to achieve this.

The problem is that I’m using client-side validation. The immediate solution is of course to manually validate the form: if ($('form').validate().valid()) { .. }

The ultimate solution would be to hook onto some event which is invoked when the POST is made. (To support any other plugins that might prevent the form from submitting and when the validation plugin is not used.)

Answer 1

Assuming you’re using jQuery validate, you can use the submitHandler property to run code when the validation passes, for example:

$("#myForm").validate({
    submitHandler: function(form) {
        // display overlay

        form.submit();
    }
});

Further reading