4

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

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

4

3 回答 3

8

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

<div class="targetDiv" @if (Html.ViewData.ModelState.IsValidField("StartDate"))
{
     <text>style="display:none"</text>         
}>
     My content 
</div>
于 2012-04-22T12:26:41.693 回答
4

您必须首先验证您的表单（假设它的 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");
    }
}
于 2012-04-22T12:25:06.960 回答
1

不显眼的验证会向您的验证元素添加一个 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。我模仿了不显眼的验证的工作原理并提供了工作示例：

​</p> 

$(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/

问候。

于 2012-04-22T12:26:04.143 回答