Question

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

<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值为无效show "targetDiv" div且StartDate值为有效，则需要隐藏它。你的建议是什么？

Answer 1

您可以使用ModelState.IsValidField method

检查字段有效性

<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类，这就是它如何确定它是否显示或隐藏验证消息。这是一个考试：

<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元素是否包含字段验证错误类，并显示 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/

问候。

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

3 个答案: