jQuery detect form is ready for submit (no alert messages displayed)

Question

I have a webpage that I don't have the ability to change the underlying source, only can use jQuery to manipulate it.

The way the page works currently, when the form submit button is pressed, if there is anything wrong with the form, it will throw up alert message. If the page is valid, it will just submit the form normally.

What I am trying to do is add a click event to the submit button, but I only want the event to fire if I know the form does not have any errors (no alert messages). Is this possible?

The problem I have now is attaching a click works and fires my code, however the event runs regardless of if the form is really valid (no alert messages) or not valid (alert messages).

Thanks!

Answer 1

To stop the form from continuing with the submit, just return false from your event handler.

$('#yourForm').submit(function () {
    // validation code here
    if (notValidForSomeReason) {
        return false;
    }
});

Answer 2

You'll have to validate the form when you trigger the click event. If invalid, return false. If valid, it'll then submit.