Jquery 如果不引人注目的验证无效，则显示div；如果在MVC 3中有效，则隐藏div

这是我的编辑视图的一部分：

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

@LabelFor（model=>model.MainModel.StartDate）
@Html.TextBoxFor（model=>model.MainModel.StartDate）
@Html.ValidationMessageFor（model=>model.MainModel.StartDate）
我的内容

---

所以大家都知道，当我的模型中的

StartDate

字段无效时，请低调地显示错误消息，如果有效，请将其隐藏。现在，我想在此过程中添加另一个操作。如果

StartDate

值无效，我需要显示

目标div

，如果

StartDate

值有效，则隐藏它。你有什么建议

您必须首先验证表单（假设表单的id为myForm，并且以下代码包装在保存按钮单击函数中）：

---

不引人注目的验证将css类添加到您的验证元素中，这就是它决定显示或隐藏验证消息的方式。这里有一个例子：

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

在实际示例中，您只需使用：

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

以下是JSFIDLE：

---

注意。

您可以使用

我的内容

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

$(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    
         }
    });
});​ 

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

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