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.

Bonham

Answer 1

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" />

Bonham

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 – Maeve

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. – Pragmatic

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. – Tor

Still get the client side validation pop up momentarily... not ideal – Outwash

I get the validation pop up for a few seconds as well. It is quite buggy – Procurer

@KSwift87. I think cancel belongs to JQuery Validate and not to MVC – Plio

To get it to work with MVC 5 I had to add "formnovalidate" attribute to the button. See jqueryvalidation.org/reference search for "Skipping validation on submit" – Plio

If it is a button, add type="reset" to skip validation – Foreshadow

Answer 2

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>

Oozy

Answer 3

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>

Polley

Not in MVC 4. It still behaves (at least for me) the same way for a button as input. – Apt

Answer 4

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;
        });
    }
});

Margo