使用 Asp.net Core MVC Bootstrap 4，我无法让不显眼的验证在服务器端添加的模型状态错误中正常工作

Question

视图模型上的验证注释似乎一切都很好。但是，当我在服务器端（在表单发布之后）进行一些额外的验证并添加模型状态错误时，我遇到了问题。这些错误实际上会正确呈现并在服务器的响应中出现，但是，与表单上的属性/输入之一关联的错误最终会以某种方式清除。现在，如果我将验证摘要放在页面上，该消息确实会显示在那里，但与输入直接相关的消息不会显示，并且输入不再被标记为无效。知道会发生什么吗？

我正在使用 jQuery v2.1.4、jQuery Validation v1.14.0、jQuery Validation Unobtrusive v3.2.6、Bootstrap 4.4.1，并且我正在使用此插件的 v2.2.0 版本：https://github.com/brecons /jquery-validation-unobtrusive-bootstrap。在我找到我刚才提到的插件之前，我无法让任何 BS4 验证内容正常工作/看起来正确。现在它可以工作并且看起来很棒，但是服务器端添加的模型状态错误最终不会像我希望的那样到达客户端。我认为它们在响应中可以从服务器发送到客户端，但我认为可能有一些脚本处理正在清除这些错误消息。我想现在已经有人解决了这个问题。

cshtml 设置：

<div class="form-group">
    <label asp-for="Email" class="control-label"></label>
    <input asp-for="Email" class="form-control" type="email" autocomplete="off" autofocus="true" />
    _<span asp-validation-for="Email" class="invalid-feedback"></span>_
</div>
the server-side add model error statement:
this.ModelState.AddModelError(nameof(LoginViewModel.Email), "Your account has been disabled.");

从服务器到客户端的响应：

<div class="form-group">
    <label class="control-label" for="Email">Email Address</label>
    <input class="form-control input-validation-error" type="email" autocomplete="off" autofocus="true" data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" value="[email protected]" />
    _<span class="invalid-feedback field-validation-error" data-valmsg-for="Email" data-valmsg-replace="true">Your account has been disabled.</span>_
</div>

这是在页面显示在浏览器中之后对页面进行的检查。正如您所看到的，来自服务器的验证消息消失了，输入中的错误也被清除了：

<div class="form-group">
    <label class="control-label" for="Email">Email Address</label>
    <input class="form-control input-validation-error is-valid" type="email" autocomplete="off" autofocus="true" data-val="true" data-val-required="The Email Address field is required." id="Email" name="Email" value="[email protected]" style="" aria-required="true" aria-invalid="false" aria-describedby="Email-error">
    <div id="Email-error" class="is-invalid invalid-feedback" style="display: block;"></div>
    _<span class="invalid-feedback field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>_
</div>

Answer 1

您需要添加自定义 CSS 才能使其工作

.field-validation-error {
  color:red;
  font-size: smaller;
}

.input-validation-error{
  border-color: #dc3545;
}

因为 dotnet MVC 中的验证在渲染的 html 中使用此类：

<span class="field-validation-error" data-valmsg-for="Customer.Name" data-valmsg-replace="true">The Name field is required.</span> 
<input class="input-validation-error form-control" data-val="true" data-val-length="The field Name must be a string with a maximum length of 255." data-val-length-max="255" data-val-required="The Name field is required." id="Customer_Name" maxlength="255" name="Customer.Name" type="text" value="">

归功于此博客： https://dotnetthoughts.net/how-to-use-bootstrap-style-validation-in-aspnet-core/