ASP.NET MVC 客户端验证的正确消息

Question

在 ASP.NET MVC 中，验证用户在文本框中键入的数据非常容易。通过添加以下行，我们要求框架在用户输入错误时显示错误消息。

@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })

在我的应用程序中，我想要这个功能，但我还想在用户输入正确信息时显示一条消息。有没有像ValidationMessageFor 这样的 html 助手，它会显示一条消息，通知用户输入的信息正确？

Answer 1

如果您只有简单的客户端验证案例，您可以尝试更改您的 css。 不显眼的验证 库将valid class 设置为有效的字段。

所以你可以像这样改变你的CSS：

input.valid, select.valid, textarea.valid{
   border-color: green;
}

需要服务器参与的更复杂的情况，只有在字段更改时发送 AJAX 调用才能实现。

Answer 2

我找到了问题的答案。这不是最好的解决方案，但它有效。我将在这里写它，因为可能会有更多人需要它。

我创建了一个计时器，每 X 毫秒检查一次模型的所有已验证属性，如果指定属性的错误消息具有类“field-validation-valid”，这意味着用户键入的属性是有效，所以我显示有效的错误消息。否则我隐藏它。

在视图中，我添加了一个 div，其中包含有效字段的消息，该字段的 id 等于 ValidNameFor，后跟属性名称。

@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
<div id="ValidNameForSurname">This is correct</div>

JavaScript

$(document).ready(function () {
    setInterval(function ()
    {
        $(".form-control").each(function () {
            var confirmSpan = $("span[data-valmsg-for='" + $(this).attr('id') + "']");
            if (confirmSpan.hasClass("field-validation-valid")) 
                $("#ValidNameFor" + $(this).attr('id')).show();
            else
                $("#ValidNameFor" + $(this).attr('id')).hide();
        });
    }, 500);
});

删除计时器的一种方法是创建一个 jQuery 事件，当一个类被添加或从元素中删除时，它会通知我。如果发生这样的事件，我可以在将“field-validation-valid”类添加到已验证属性时删除计时器并显示或隐藏正确的文本。如果有人知道如何将此类事件添加到元素中，那就太好了。

Answer 3

您可以使用是否显示验证消息作为显示确认的条件，其中 onfocusout 作为触发器。所以给定一些像这样的html：

<form id="myFrm" action="/Account/Login?ReturnUrl=%2F" class="form-horizontal" method="post" role="form">            <h4>Use a local account to log in.</h4>
   <hr />
   <div class="form-group">
         <label class="col-md-2 control-label" for="Email">Email</label>
         <div class="col-md-10">
                <input class="form-control myFrmInputs" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
               <span id="confirmEmail" class="confirmationMessage">Correct</span>
         </div>
      </div>
      <div class="form-group">
         <label class="col-md-2 control-label" for="Password">Password</label>
         <div class="col-md-10">
            <input class="form-control myFrmInputs" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
            <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            <span id="confirmPassword" class="confirmationMessage">Correct</span>
         </div>
    </div>
</form>

像这样的一些 CSS：

.confirmationMessage {
    display:none;
}

Javascript/jQuery

  $( document ).ready(function() {
            $(".myFrmInputs").each(function() {            
                $(this).focusout(function() {
                   //var errorSpan = $("#myFrm span[data-valmsg-for='" + $(this).attr('id') + "']");
                   var errorSpan = $("#" + $(this).attr('id') + "-error");
                   if (errorSpan.length>0 && !$(errorSpan).is(":visible")) 
                   {
                       $("#confirm" + $(this).attr('id')).show();
                   }
                });    
            });
    });

您可以仅根据输入是否未被标记为无效来显示确认。这仅适用于文本输入，但您可以将方法用于其他输入类型。它几乎没有准备好生产，但它可以工作：http://jsfiddle.net/f55xsLjx/1/