Show div if unobtrusive check is invalid and hide it if Valid in MVC 3

Question

This is part of my edit:

<dt> @Html.LabelFor(model => model.MainModel.StartDate) </dt> <dd> @Html.TextBoxFor(model => model.MainModel.StartDate) @Html.ValidationMessageFor(model => model.MainModel.StartDate) <div class="targetDiv"> My content </div> </dd> 

So, as you all know, when the StartDate field in my model doesn’t unobtrusively display an error message, and if it is true, hide it. Now I want to add another action to this process. I need if the StartDate value is Invalid show the "targetDiv" div , and if the StartDate value is Valid, hide it. What is your suggestion?

Answer 1

You can verify the correctness of the field using ModelState.IsValidField :

 <div class="targetDiv" @if (Html.ViewData.ModelState.IsValidField("StartDate")) { <text>style="display:none"</text> }> My content </div> 

Answer 2

You need to first confirm your form (provided that it has the myForm identifier, and the following code is enclosed in the click function of the save button):

 $("#myForm").validate(); if ($("#myForm").valid()) { $("#targetDiv").css("display", "none"); } else { if ($("[id='MainModel.StartDate']").hasClass("input-validation-error") { //note the strange ID selector above, that because it got a . in :) $("#targetDiv").css("display", "block"); } else { $("#targetDiv").css("display", "none"); } } 

Answer 3

Unobtrusive validation adds css classes to your validation element and determines whether it will show or hide the validation message. Here is an example:

 <div class="editor-label"> <label>Start date</label> <input class="text-box single-line" data-val="true" data-val-required="Must not be Empty" id="StartDate" name="StartDate" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span> </div> <div class="targetDiv">Your div shown only if StartDate is invalid</div> 

This is how your html will look in the source. After you enter incorrect data in the StartDate input, it will be slightly different from the classes added to your input and the span element:

 <div class="editor-label"> <label>Start date</label> <input class="text-box single-line input-validation-error" data-val="true" data-val-required="Must not be Empty" id="StartDate" name="StartDate" type="text" value=""> <span class="field-validation-error ui-state-error-icon ui-icon-alert" data-valmsg-for="StartDate" data-valmsg-replace="true"></span> </div> 

You can check if the span element has a field validation class and will show your targetDiv. I imitated how unobtrusive validation works and provided a working sample:

 $(function(){ $('.targetDiv').hide(); //hide your div $('#StartDate').change(function() { //capture change event for your input StartDate $(this).addClass('input-validation-error'); //add unobtrusive css class for not valid $(this).next().removeClass('field-validation-valid').addClass('field-validation-error ui-state-error-icon ui-icon-alert'); //add unobtrusive css class for not valid on span if( $(this).next().hasClass('field-validation-error')) //check if span has a error class on it { $('.targetDiv').show(); //show your div } }); });​ 

In the real world example, you just need to use:

 $('#StartDate').change(function() { if( $(this).next().hasClass('field-validation-error')) { $('.targetDiv').show(); } }); 

Here's jsFiddle: http://jsfiddle.net/mgrcic/Zj6zS/

Sincerely.