3

I would like to wire up ALL forms so that a loader is shown after Jquery Validation has found no errors and before the form is submitted or on submit.

How can this be accomplished using MVC 4 unobtrusive validation?

I have tried the following as per this article, How to add a 'submitHandler' function when using jQuery Unobtrusive Validation?:

$("form").data("validator").settings.submitHandler = function (form) { alert('submit'); form.submit(); };

I placed this in the OnLoad section but this does not fire. I asume the above will work for all forms?

Thanks!

Community
  • 1
  • 1
Julian Dormon
  • 1,767
  • 4
  • 32
  • 58

1 Answers1

6

See the documentation for the built-in setDefaults method. You also do not need the form.submit() line as the plugin already takes care of that.

$.validator.setDefaults({
    submitHandler: function (form) {
        alert('valid form submitted'); // for demo
        return false; // for demo, blocks default submit, needed with ajax too.
    }
});

DEMO: http://jsfiddle.net/W4jfY/

EDIT:

To apply to just one form instead...

$('#myform').validate({
    // any other options for this form,
    submitHandler: function (form) {
        alert('valid form submitted'); // for demo
        return false; // for demo, blocks default submit, needed with ajax too.
    }
});
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Thanks! That works, but you do indeed need the form.submit() in there as it was not working without it. Appreciate it! – Julian Dormon Apr 23 '13 at 20:15
  • I have another form in the same page which is handled by ajax. This seems to have broken this form. Can I make this conditional somehow? – Julian Dormon Apr 23 '13 at 20:22
  • @JulianDormon, oh yes of course. Simply put the `submitHandler` option on your one form instead of inside the `setDefaults` method. – Sparky Apr 23 '13 at 20:27
  • @JulianDormon, No, you do not need the `form.submit()` unless you also kept the `return false` in there (for demo only). In other words, remove the `return false` and you will find it works fine without the `form.submit()`... that's the default behavior. – Sparky Apr 23 '13 at 20:32
  • 2
    Thanks but this does not seem to be working - the code is ignored or perhaps overwritten by MVC unobtrusive validation script. – Julian Dormon Apr 23 '13 at 21:05
  • http://jqueryvalidation.org/validate#submithandler suggests that this is to override the default submit so you do need to do form.submit(). It is not like a normal jquery submit handler. – Alex KeySmith Oct 27 '14 at 09:07
  • However, this https://github.com/jzaefferer/jquery-validation/releases/tag/1.13.1 does suggest the use of the return value. – Alex KeySmith Oct 27 '14 at 09:10
  • 1
    @AlexKey, if you don't use the `submitHandler` at all, then after validation the form submits using the `action` attribute of the `form`. However, when you **do** use the `submitHandler`, you must somehow submit the form yourself, either by `ajax` or `submit`. My only point was that if you have no other code inside of `submitHandler` besides `form.submit()`, then you don't need to use the `submitHandler` at all, since that's already the default code and behavior of the plugin. – Sparky Oct 27 '14 at 15:04