jQuery Validator Submitting Forms With onsubmit = false and a Custom submitHandler

Question

In my MVC project (which uses jQuery Unobtrusive Validation), I've got a view which contains multiple forms. I'd like to prevent all forms from submitting when they are valid, and do something else instead.

Here is a brief snippet of one of the forms:

@using (Html.BeginForm()
{
   @Html.LabelFor(m => m.Name)
   @Html.TextBoxFor(m => m.Name)
   // etc.

In my Javascript validation configuration, I've included onsubmit: false, ignore: [], and a custom submitHandler - but my forms are submitting anyway.

$.validator.setDefaults({
    debug: false,
    onsubmit: false,
    ignore: [],
    submitHandler: function (event) {
        event.stopPropagation;
        console.log("Form submission prevented.");
    }
});

I've also tried something like this unsuccessfully:

$('form').each(function () {
    $(this).validate({
        debug: false,
        onsubmit: false,
        ignore: [],
        submitHandler: function (event) {
            event.stopPropagation;
            console.log("Form submission prevented.");
        }
    })
});

Why are my forms still submitting?

Answer 1

Quote OP:

"The idea is to prevent all forms from submitting when they are valid, and do something else instead."

Then you simply need this...

submitHandler: function(form) { // <- argument is 'form' object only!
    // do something else, (or ajax)
    return false;
}

However, since you're using the MVC framework with unobtrusive validation, jQuery Validate's .validate() method is constructed and called automatically.

You must call .setDefaults() before your ASP framework calls .validate().

Some people have success achieving this by putting .setDefaults() outside of their document ready function.

Also see: https://stackoverflow.com/a/12305576/594235

---

Side-note:

You also cannot put .stopPropagation (it's really .stopPropagation(); note the missing()) within just any type of function.

• "event" is NOT a valid argument provided by the developer for this callback function. It's "form" and it only represents the form object. You can change "form" into "event" or any other word, but it still represents the form object.

• jQuery .stopPropagation() is for use within an event handler function (actions on an event), NOT for a plugin's callback function.