How to fire jQuery function only if form is valid

Question

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 1

If you are using jquery validate unobtrusive validation you could:

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

Answer 2

$(function () {
    $('#signupform').submit(function (e) {
        if (validateForm() === true) {
            alert('Form is valid.');
        }
    });
});

Note, the validateForm() function would be the one you use within the browser to test validation. EDIT: This is indeed jQuery's $(this).valid() .

NOTE: On clarification of the question, the answer above is one way to stop form submitting on validation, but not the technique that was desired ( jQuery valid() validation ). See Darin Dimitrov's answer for details.

Also, on rereading the original question, the intent was the exact opposite of what I originally described. So I edited to demonstrate a functional response on validation, not how to prevent submitting a form.