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?

score 52 · Accepted Answer · answered Aug 29 '12 at 13:43

52

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.

answered Aug 29 '12 at 13:43

w00

26,172
30
101
147

11

note that to keep the default jquery validation behavior you should put `settings.ignore = ":hidden, .ignore"` Personally I prefer to add `:disabled` also – Simon_Weaver Jul 01 '13 at 09:16
2

Source: http://weblogs.asp.net/imranbaloch/archive/2011/07/13/overriding-unobtrusive-client-side-validation-settings-in-asp-net-mvc-3.aspx – wolfyuk Jul 04 '13 at 14:37
1

Doesn't disable it for me. – Shimmy Weitzhandler Mar 16 '15 at 09:40
2

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);` `}` `});` – Alexey Vol Apr 05 '17 at 08:42
`$.data($('form')[0], 'validator').settings` returns nothing in my case... – Azimuth May 02 '18 at 09:27
1

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. – Mariusz Pawelski Jul 17 '18 at 13:21
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). – bkqc Oct 19 '22 at 21:06

score 16 · Answer 2 · answered Nov 03 '14 at 15:16

16

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>

answered Nov 03 '14 at 15:16

Santiago Rebella

178
3
12

1

This should be the accepted answer! 2 years more recent than the other – JavierIEH Jun 09 '16 at 13:53
3

@JavierIEH 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. – mikeschuld Nov 27 '16 at 20:47
1

Well answer may vary depending on the problem the user has – Santiago Rebella Aug 24 '17 at 23:11
I think the key here is knowing what the Html.EnableClientValidation(false) actually outputs in html when the page is rendered. – eaglei22 Apr 26 '18 at 17:55
Okay, so trying this in mvc4, not only did it not work, but it added no additional attributes to the input field. – eaglei22 Apr 26 '18 at 17:58

score 1 · Answer 3 · answered Jun 18 '21 at 07:54

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

score 0 · Answer 4 · answered Nov 05 '19 at 18:09

0

This worked better for me:

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

answered Nov 05 '19 at 18:09

endyourif

2,186
19
33

Disable validation for an element with jQuery Unobtrusive Validation

4 Answers4

Linked