show div if unobtrusive validation was invalid and hide it if Valid in MVC 3

Question

This is a part of my Edit view:

<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 all of you know when StartDate field in my model not valid unobtrusive show the error message and if valid hide it. Now I want to add another action to this process. I need if StartDate value is Invalid show "targetDiv" div and if StartDate value is Valid hide it. what is your suggestion?

Answer 1

You can check for field validity with ModelState.IsValidField method

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

Answer 2

You'll have to first validate your form (assuming it's got an id of myForm and the following code is wrapped inside a save button click function):

$("#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's because it's got a . in :)
        $("#targetDiv").css("display", "block");
    }
    else {
        $("#targetDiv").css("display", "none");
    }
}

Answer 3

Unobtrusive validation adds a css classes to your validation element and that's how it determines will it show or hide the validation message. Here's an examle:

<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 write invalid data in the StartDate input it will look slightly different notice the classes added to your input and to 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 span element has a field-validation-error class and show your targetDiv. I mimicked how unobtrusive validation works and provided the 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 the jsFiddle: http://jsfiddle.net/mgrcic/Zj6zS/

Regards.