How to fire jQuery function only if form is valid

问题:

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.

回答1:

If you are using jquery validate unobtrusive validation you could:

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

回答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.