显示DIV如果不引人注目的验证是无效的，如果在MVC 3个有效隐藏(show div if unob

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

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

所以当大家知道什么时候StartDate在我的模型无效不显眼的显示错误消息字段，如果没有有效的隐藏它。 现在我想另一个操作添加到这个过程中。 我需要的，如果StartDate值无效秀"targetDiv" div ，如果StartDate值是有效的隐藏它。 你有什么建议吗？

Answer 1:

您可以检查与现场的有效性ModelState.IsValidField方法

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

Answer 2:

你必须首先确认您的形式（假设它有myForm会的一个ID，下面的代码被包裹保存按钮点击函数内）：

$("#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:

不引人注目的验证增加了一个CSS类的验证元素，这就是它如何决定将它显示或隐藏验证消息。 下面是一个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>

这是你的HTML的外观在源。 您在起始日期输入写无效数据后，它会看起来略有不同的通知类添加到您的输入和span元素：

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

您可以检查是否span元素有一个字段验证错误类，并显示您的targetDiv。 我模仿验证如何不显眼的工作和提供工作样例：

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

这里的的jsfiddle： http://jsfiddle.net/mgrcic/Zj6zS/

问候。

文章来源: show div if unobtrusive validation was invalid and hide it if Valid in MVC 3