jQuery Validation plugin: disable validation for specified submit buttons

Question

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

Much thanks in advance for helpful pointers.

[UPDATE] Thanks to redsquare I discovered it's as easy as adding class="cancel" to the submit button. So easy and yet I have no idea how I did not come across it in all my searching.

And for those who say my my follow-up answer regarding "but requires a double-click": this was merely due to a leftover experiment line that was unbinding the event - again something I don't know how I overlooked when testing. Thanks!

Answer 1

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

Answer 2

You can use the onsubmit:false option (see documentation) when wiring up validation which will not validate on submission of the form. And then in your asp:button add an OnClientClick= $('#aspnetForm').valid(); to explicitly check if form is valid.

You could call this the opt-in model, instead of the opt-out described above.

Note, I am also using jquery validation with ASP.NET WebForms. There are some issues to navigate but once you get through them, the user experience is very good.

Answer 3

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

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

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