MVC 3 unobtrusive validation - conditionally disable/enable validation

Question

I have a form that has an option to enter dimensions for:

• Width & Height
• Width
• Height

And I have two container divs that I hide/show depending on which of the three options is selected:

<div class="editor-field" id="width-container">
     @Html.EditorFor(model => model.Width)
     @Html.ValidationMessageFor(model => model.Width)
</div>

<div class="editor-field" id="height-container">
     @Html.EditorFor(model => model.Height)
     @Html.ValidationMessageFor(model => model.Height)
</div>

If height is selected, then width is not displayed on the form, how can I disable the unobtrusive validation on the Width input field in a fashion that will allow me to easily re-instate it if the user changes their mind i.e. removing data-* attributes is not an option. I'm happy to create an CustomAttribute class to handle this BUT I do not want to have to hack the standard jquery files to make this work as it makes updating to new versions a headache down the track. If all else fails I'll use my usual trick of adding a value of 0 to the fields when they are not visible and then removing it when they are shown.

EDIT:

Please be mindful that when Width is not visible it is not a "hidden" field per se it's just a input tag that's not visible to the user because the parent div has a style of display:none

Trueblood

Answer 1

You can set up the jQuery validator that's processing your unobtrusive validation to ignore hidden elements:

jQuery.validator.defaults.ignore = ":hidden";

// the line above is outside any $(document).ready(...) or similar
$(document).ready(function(){
    ...
});
...

Derrek

I've seen various version of this but none of them seem to work - I came to the conclusion that the problem is either that this rule doesn't work because it's not the input tag that is hidden it's the parent div - or this rule is designed to work on "hidden" tags not "invisible" input tags. BTW I've tried your solution and it doesn't work. – Trueblood

:hidden is definitely true for elements that are hidden because their parents are hidden. As you can see in this fiddle, my solution works well in a basic case: jsfiddle.net/7PmEz/5. So let's try to find where the delta is to what you have, there must be something else missing. Please put the html that is generated into a jsfiddle, then try to use the same javascript I use to test it. If that works, please post the entire view code so we can take a look. – Derrek

Hmmm frustrating, I can't really put the code into jsfiddle because it's generated using MS MVC3 framework - so it's not really performing a valid comparison... – Trueblood

It's a little tricky but you can. Add the validation and unobtrusive js files as resources on the left side. Then you can copy and paste the source generated by MVC into the html. Then you have to call the unobtrusive parsing on document ready. You can use the $.validator.unobtrusive.parse function. – Derrek

If using jquery, be sure to place this line outside of the $(document).ready(function () {... – Hatpin

This is by default with recent versions of jquery validate. – Enthrone

Answer 2

So it seems that this is the answer to my question (I went hunting again on Google hard to search for things that didn't relate to "hidden" fields):

https://mcmap.net/q/1591995/-mvc3-unobtrusive-validation-how-to-remove-re-attach-validation-from-a-group-of-elements

e.g.

$("#height-container input[type='text']").attr("disabled", "disabled");

Thanks for your answers.

Trueblood

So how do you then type in the input? – Scholasticism

it's only disabled when not displayed to the user - see the SO link above my answer – Trueblood