Categories
jquery jquery-validate

jQuery Validation plugin: disable validation for specified submit buttons

172

I have a form with multiple fields that I’m validating (some with methods added for custom validation) with Jörn Zaeffere’s excellent jQuery Validation plugin. How do you circumvent validation with specified submit controls (in other words, fire validation with some submit inputs, but do not fire validation with others)? This would be similar to ValidationGroups with standard ASP.NET validator controls.

My situation:

It’s with ASP.NET WebForms, but you can ignore that if you wish. However, I am using the validation more as a “recommendation”: in other words, when the form is submitted, validation fires but instead of a “required” message displaying, a “recommendation” shows that says something along the line of “you missed the following fields…. do you wish to proceed anyways?” At that point in the error container there’s another submit button now visible that can be pressed which would ignore the validation and submit anyways. How to circumvent the forms .validate() for this button control and still post?

The Buy and Sell a House sample at http://jquery.bassistance.de/validate/demo/multipart/ allows for this in order to hit the previous links, but it does so through creating custom methods and adding it to the validator. I would prefer to not have to create custom methods duplicating functionality already in the validation plugin.

The following is a shortened version of the immediately applicable script that I’ve got right now:

var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
}); 

1

296

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

See the jQuery Validator documentation of this feature here: Skipping validation on submit


EDIT:

The above technique has been deprecated and replaced with the formnovalidate attribute.

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

5

  • 1

    Is it working with <input />?I added class=”cancel” and it’s not working. I’m using MVC2 with MicrosoftMvcValidation. Thank you.

    – VinnyG

    Dec 13, 2010 at 22:56

  • 4

    @VinnyG – not used MicrosoftMvcValidation (and would never) – this is not the same as jquery validate.

    – redsquare

    Dec 13, 2010 at 23:02

  • 1

    is it possible to achieve the same behavior without the input element? i.e. can i somehow trigger (in a documented way, as opposite to lepe’s answer) form submission and skip validation at the same time?

    – ivan

    Apr 13, 2012 at 14:55


  • 11

    Note: this doesn’t work if you dynamically add the class cancel, ie $('input[type=submit]').addClass('cancel'), the class has to be present on page load.

    – lolesque

    Jun 13, 2012 at 15:40

  • @lolesque you prob need to call the validation method again unless they have changed the way it works note the date on this answer)

    – redsquare

    Jun 13, 2012 at 16:57

109

Other (undocumented) way to do it, is to call:

$("form").validate().cancelSubmit = true;

on the click event of the button (for example).

2

  • Hello @lepe, you know how to re-apply jquery validation after writing $("form").validate().cancelSubmit = true;. I tried $("form").validate().cancelSubmit = false; and calling $("form").validate(); on submit of my submit button. Thanks

    – Jaikrat

    Oct 30, 2015 at 14:43


  • 3

    It can be done like $(yourForm).data('validator').cancelSubmit = false; Thanks

    – Jaikrat

    Oct 30, 2015 at 14:58

22

Yet another (dynamic) way:

$("form").validate().settings.ignore = "*";

And to re-enable it, we just set back the default value:

$("form").validate().settings.ignore = ":hidden";

Source: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443