How to fire jQuery function only if form is valid

Scott picture Scott · Feb 19, 2011 · Viewed 76.3k times · Source

I have a jQuery function tied to my submit button like this:

$(function () {
    $('#signupform').submit(function () {
        alert('test');
    });
});

However, it fires whether or not the form is valid. My model is decorated with various DataAnnotations and the client-side validation is working well, but I only want that jQuery function to fire if the form has been validated. How do I accomplish that?

EDIT: To clarify, I'm using MVC DataAnnotations + jQuery's unobtrusive javascript to handle the client-side validation. I do not have my own javascript validation routines written. The built in jQuery validation is doing a great job of validating the form, but I just need to know how to get the results of that validation into a boolean value within my own function.

Answer

Darin Dimitrov picture Darin Dimitrov · Feb 19, 2011

If you are using jquery validate unobtrusive validation you could:

$(function () {
    $('#signupform').submit(function () {
        if($(this).valid()) {
            alert('the form is valid');
        }
    });
});