Disable validation for an element with jQuery Unobtrusive Validation

Question

I am generating a list of elements on a page, and they all have validators attached to them. When I look in the HTML source, I see something like:

<input type="text" id="email" name="email" data-val-required="No valid email address!" data-val="true">

I need a way to dynamically enable/disable the validation for such an element. I tried to enable/disable the data-val attribute by setting it to false and then back to true. But it doesn't seem to response to that; the validation is always there!

Does anyone have any idea how I can enable/disable validators on certain fields dynamically?

Release

Answer 1

I actually found a solution that fits my needs better. I can do the following:

$(function() {
    var settngs = $.data($('form')[0], 'validator').settings;
    settngs.ignore = ".ignore";
});

And with that i can 'toggle' any element that i want by adding or removing the classname ignore from an element.

Release

note that to keep the default jquery validation behavior you should put settings.ignore = ":hidden, .ignore" Personally I prefer to add :disabled also – Ious

Source: weblogs.asp.net/imranbaloch/archive/2011/07/13/… – Cazares

Doesn't disable it for me. – Batman

Does not work in some cases. So I had to dig into source and found solution that works 100%: $("form").each(function () { var data = $.data(this, 'validator'); if (data && data.settings) { data.settings.ignore = '.ign'; data.settings.onclick = void(0); data.settings.onfocusin = void(0); data.settings.onfocusout = void(0); data.settings.onkeyup = void(0); data.settings.onsubmit = void (0); } }); – Yezd

$.data($('form')[0], 'validator').settings returns nothing in my case... – Goodkin

For those who want to disable validation on all elements in form: just write settngs.ignore = "*"; It works because * is universal selector that match all elements. – Slagle

Trick question: if the error message was shown before disabling validation and that once disabled, the style won't be toggled, how would you hide the error messages on the page? (Note that summary is correclty updated). – Ostiole

Answer 2

I think this will help.

<div class="editor-field">
       @{ Html.EnableClientValidation(false); }
       @Html.TextBoxFor(m => m.BatchId, new { @class = "k-textbox" })
       @{ Html.EnableClientValidation(true); }
</div>

Feminine

This should be the accepted answer! 2 years more recent than the other – Kenya

@Kenya This answer may be newer, and may have worked for you, but it only works at page render time. Anyone wanting to enable/disable the validators on the fly client side will still need to use the earlier answer. – Winged

Well answer may vary depending on the problem the user has – Feminine

I think the key here is knowing what the Html.EnableClientValidation(false) actually outputs in html when the page is rendered. – Expressage

Okay, so trying this in mvc4, not only did it not work, but it added no additional attributes to the input field. – Expressage

Answer 3

I would add one more option without overriding unobtrusive validator defaults. As validation for specific element is controled by data-val attribute, you can set it as data-val="false".

So for Razor helper, use:

@Html.TextBoxFor(model => Model.DateOfBirth, new { @class = "form-control", data_val = false })

and for new .net core syntax, use:

<input asp-for="DateOfBirth" class="form-control" data-val="false">

Jinni

Answer 4

This worked better for me:

$('#Reference').rules('add', 'required');
$('#Reference').rules('add', 'remove');
$('#Reference').rules('add', { minlength: 2 });

Grof