如果不显眼的验证无效则显示 div，如果在 MVC 3 中有效则隐藏它答案

【问题标题】：show div if unobtrusive validation was invalid and hide it if Valid in MVC 3如果不显眼的验证无效则显示 div，如果在 MVC 3 中有效则隐藏它
【发布时间】：2012-05-03 07:05:34
【问题描述】：

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

<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 值有效，则隐藏它。你的建议是什么？

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-3 unobtrusive-javascript unobtrusive-validation

【解决方案1】：

您可以使用ModelState.IsValidField method检查字段有效性

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

【讨论】：

【解决方案2】：

不显眼的验证会向您的验证元素添加一个 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>

这就是您的 html 在源代码中的外观。在 StartDate 输入中写入无效数据后，它看起来会略有不同，请注意添加到输入和 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 元素是否具有 field-validation-error 类并显示您的 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/

问候。

【讨论】：

【解决方案3】：

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

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

【讨论】：