Disable Enable unobtrusive validation for specific submit button

Question

I have two submit buttons Back, Continue. What should I to do to disable client validation when I click on Back. I was trying to add cancel class to button attribute but It seams does not help.

UPD. Actually this is working cancel class. But It seams not working if you add it dynamically(by javascript).

Honorary

Answer 1

I attached an event handler to certain buttons, that altered the settings of the validator object on that particular form.

$(".jsCancel").click(function (e) {
    $(e.currentTarget).closest("form").validate().settings.ignore = "*"
});

This has worked like a charm for me in MVC3.

I don't know if this helps you in particular, but since I use ajax form, I had to attach the event to these buttons each time the contents of the ajax form was replaced, by using the event ajax success. The full code that reparses the form and attaches the event to the cancel buttons is:

$(document).ajaxSuccess(function (event, xhr, settings) {
    var $jQval = $.validator, adapters, data_validation = "unobtrusiveValidation";
    $jQval.unobtrusive.parse(document);
    $(".jsCancel").click(function (e) {
        $(e.currentTarget).closest("form").validate().settings.ignore = "*"
    });
});

Bally

Thank you. I have solved this problem by adding "cancel" class to my button when Content were generated. I have question for you What does this selector means ".jsCancel"? And did you try use this $(".jsCancel").live("click", ... instead this $(".jsCancel").click(function (e)... – Honorary

Adding the cancel class didn't work for me, hence my work-around. We usually prefix the css classes with js, if they are used for finding elements rather than styling. I put that class on my submit-buttons that should not validate the form. I suppose live() or on() would work as well, I am just not that used to using it. – Bally

Answer 2

Hijack the button click for form submission using JavaScript.

Here is good example with jQuery:

$("#MyButton").click(function(e) { 

    //submit your form manually here
    e.preventDefault();
});

Rebellious

Answer 3

This is really a comment to the answer by tugberk, but comments don't show code examples very well.

Some browser versions do not like the "preventDefault()" function. After being bitten by this a few times, I added a simple utility function:

//Function to prevent Default Events
function preventDefaultEvents(e)
{
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

You call it in place of "preventDefault" like this:

$("#CancelButton").on("click", function(event) {
    preventDefaultEvents(event);
    return false;
});

Bonaventura

Answer 4

You can use "cancel" css class. Ex: <input type="submit" value="Cancel" name="Cancel" class="cancel" />

JQuery.Validate handle the rest in the following code:

// allow suppresing validation by adding a cancel class to the submit button
this.find("input, button").filter(".cancel").click(function() {
    validator.cancelSubmit = true;
});

Calandracalandria