MVC bypass client-side validation ("save progress" vs "submit")

Question

I have a form that I want to be able to save without validating, but validates on submit. I've got two buttons on this form to either save or submit.

The problem is: if I use a "submit" button to save (and then do a switch on which action in the controller), jquery.validate kicks in and I can't save a partially-filled out form.

If I do it as a link, I don't know how to make the form post to the new action in the controller.

Here's the HTML from the view:

<a class="btn  btn-default" data-placement="right" data-title="Save your progress." href="/Summary/Save/2" rel="tooltip"><i class="glyphicon glyphicon-floppy-disk"></i> Save Summary</a> 
<a class="btn  btn-default" confirm="Are you sure you want to revert to the previous saved copy? You will lose all changes since your last save." data-placement="right" data-title="Revert back to your last saved copy." href="/Summary/Revert/2" rel="tooltip"><i class="glyphicon glyphicon-remove"></i> Revert Changes</a> 
<button class="btn-default  btn btn-primary" confirm="This will submit the summary to the evaluator for review. No changes will be allowed unless the evaluator returns it. Are you sure?" type="submit">Submit Summary</button>

good idea-- I dug for a way to do this, and found this http://stackoverflow.com/questions/203844/jquery-validation-plugin-disable-validation-for-specified-submit-buttons/203989#203989 — pennstatephil, Jan 08 '14 at 22:20
Possible duplicate of [jQuery Validation plugin: disable validation for specified submit buttons](https://stackoverflow.com/questions/203844/jquery-validation-plugin-disable-validation-for-specified-submit-buttons) — KyleMit, Nov 16 '17 at 17:38

score 7 · Accepted Answer · answered Nov 16 '17 at 17:56

BTW, the current answer is deprecated according to the docs on Skipping validation on submit:

To skip validation while still using a submit-button, add the attribute "formnovalidate" to that input:
<input type="submit" name="go" value="Submit">
<input type="submit" formnovalidate name="cancel" value="Cancel">
This used to work by adding class="cancel" to the input, this is now deprecated.

Although, as of version 1.17, both methods still appear in the source code:

...blob/1.17.0/src/core.js#L34:

// Allow suppressing validation by adding a cancel class to the submit button
if ( $( this ).hasClass( "cancel" ) ) {
    validator.cancelSubmit = true;
}

// Allow suppressing validation by adding the html5 formnovalidate attribute to the submit button
if ( $( this ).attr( "formnovalidate" ) !== undefined ) {
    validator.cancelSubmit = true;
}

Further Reading: jQuery Validation plugin: disable validation for specified submit buttons

updated this to the new accepted answer, I'm glad they added this. — pennstatephil, Feb 18 '21 at 21:55
Now when I am clicking save button, it works, but then it is not validating even on Submit button. — Himalaya Garg, Sep 22 '21 at 04:19
@HimalayaGarg, can you post a fiddle or a repo of your issue? — KyleMit, Sep 22 '21 at 15:00

score 5 · Answer 2 · edited May 23 '17 at 11:58

5

@user2864740 suggested I temporarily disable jquery validation, which is a good idea-- found a way to do that at jQuery Validation plugin: disable validation for specified submit buttons

Answer posted for convenience:

You can add a css class of cancel to a submit button to suppress the validation

e.g

<input class="cancel" type="submit" value="Save" />

edited May 23 '17 at 11:58

Community

1
1

answered Jan 08 '14 at 22:22

pennstatephil

1,593
3
22
43

1

By the way, in case you didn't know, you can mark your own answer as an answer. This is encouraged as it a) marks the question as answered and b) others in the future will know this worked. I would recommend including a short code snippet showing *how* to disable validation for specific submit buttons in your answer (in case your link goes away in the future) :) – Tommy Jan 08 '14 at 22:42
thanks-- it says I have to wait 2 days to accept my answer. I'll certainly add a snippet, though. – pennstatephil Jan 08 '14 at 22:53

score 0 · Answer 3 · edited Feb 19 '21 at 18:04

0

You can do it by adding formnovalidate attribute in the button on which you want to disable validation.

<input formnovalidate="formnovalidate" type="submit" value="Save" />

edited Feb 19 '21 at 18:04

KyleMit

30,350
66
462
664

answered Feb 18 '21 at 09:38

Kaleem Shoukat

811
6
14

Kaleem, I think this is already covered by my accepted answer – KyleMit Feb 19 '21 at 18:06

MVC bypass client-side validation ("save progress" vs "submit")

3 Answers3