Disable client-side validation in MVC 3 "cancel" submit button

Question

OK, been trying things for hours and could use some help. I'm trying to implement a page in MVC 3 that has "back" and "next" buttons. When the back button is clicked I want to disable client-side MVC validation from running so that my action method will run and send the user to the previous logical web page. I've tried this:

<script type="text/javascript">
  document.getElementById("backButton").disableValidation = true;
</script>

and this:

<input type="submit" name="backButton" value="← Back" 
 title="Go back to step 1." disableValidation="true" />

But no matter what, the cilent-side validation JavaScript kicks in and won't let the button do its post-back. I'm thinking that disableValidation only works in MVC 2 perhaps, and I'm supposed to be doing something else in MVC 3, but cannot seem to find any examples.

score 130 · Accepted Answer · answered Mar 19 '11 at 18:16

130

What is this mystical force that causes the answer to reveal itself as soon as you post a question somewhere?

It looks like in MVC 3 you disable client-side validation on a button by adding the class "cancel" to it. So in my example:

<input type="submit" name="backButton" value="← Back"
 title="Go back to step 1." class="cancel" />

works great. And no ID attribute is needed either. If you have an actual style class on the button, just do this:

<input type="submit" name="backButton" value="← Back"
 title="Go back to step 1." class="style-name cancel" />

answered Mar 19 '11 at 18:16

Glenn Doten

2,533
2
19
21

3

I suspect the "mystcal force" is helping you to help others. :) I was having a similar problem and your solution popped up quick. Thanks. +1 – REMESQ Mar 03 '12 at 19:54
6

I've heard it explained many times, but I like "rubber ducking" the best. It's about how you understand a problem much better when you, yourself, explain it to others. You explain it with finer detail than you've ever thought of it, so it leads you to better understanding of the problem. A good thing to do is to think of it, or talk it out, as if you're explaining it to someone you wish to help you. You might find the answer. The "rubber duck" comes from someone who put a rubber duck on their monitor. He'd then tell the rubber duck his problem and sometimes would figure it out. – vbullinger Aug 06 '12 at 14:53
9

Wtf. I thought the whole point of MVC was separation of concerns. In which case, how the hell does this *NOT* violate separation of concerns? Using CSS to actually affect the functionality of the view? I love that it works, but I feel dirty for using it. – KSwift87 Apr 26 '13 at 21:34
1

Still get the client side validation pop up momentarily... not ideal – BritishDeveloper Oct 08 '13 at 11:27
I get the validation pop up for a few seconds as well. It is quite buggy – Nick Dec 03 '13 at 12:25
@KSwift87. I think cancel belongs to JQuery Validate and not to MVC – Karsten Jun 02 '15 at 07:54
9

To get it to work with MVC 5 I had to add "formnovalidate" attribute to the button. See http://jqueryvalidation.org/reference/ search for "Skipping validation on submit" – Karsten Jun 02 '15 at 07:55
If it is a button, add `type="reset"` to skip validation – SimpleGuy Oct 09 '20 at 15:07

score 3 · Answer 2 · answered Apr 07 '20 at 16:59

I know... very old question.. Yet it was the top of the search results when I looked.

For MVC 4 (and a BUTTON) it seems (at least for me) that the answer is simply adding the formnovalidate="formnovalidate"

 <button type="submit" class="btn btn-outline-success border-0" formnovalidate="formnovalidate" name="command" value="Back" title="Back">
    <span class="fas fa-arrow-left" aria-hidden="true"></span>
    &nbsp;Back
</button>

score 1 · Answer 3 · edited Mar 21 '12 at 06:12

1

The validation scripts seem to be linked to the submit type input. By changing cancel to a button, validation is skipped:

<button type="button" onclick="document.location.href('Index')">Cancel</button>

edited Mar 21 '12 at 06:12

TryTryAgain

7,060
10
37
81

answered Mar 20 '12 at 17:57

David

11
2

Not in MVC 4. It still behaves (at least for me) the same way for a button as input. – eaglei22 Dec 15 '15 at 21:09

score -1 · Answer 4 · answered Aug 21 '14 at 08:42

I use this for button

$("button").each(function (elem) {
    var button = $($("button")[elem]);
    button.addClass('cancel');

    if (button.attr('type') == 'submit') {

        button.click(function (e) {
            var validator = button.closest('form').validate();
            validator.cancelSubmit = true;
        });
    }
});

Disable client-side validation in MVC 3 "cancel" submit button

4 Answers4

Linked