Question

假设我有一个这样的字段：

<div class="form-group">
<label for="fullname" asp-for="UserName">Username</label>
<input class="form-control"
       type="text" name="username"
       required asp-for="UserName">
<span asp-validation-for="UserName"></span>
</div>

在我的控制器内部，我添加了此错误：

ModelState.AddModelError("username", "username already registered");

现在，我想将焦点放在input字段上，并且我想应用红色边框，是否只能通过MVC来做到这一点？

Answer 1

当模型验证失败并返回同一视图时，框架会将input-validation-error CSS类添加到验证失败的输入元素。在您的情况下，您要将错误消息添加到UserName字段中，因此您的UserName字段输入将获得此新的CSS类。

<input class="form-control input-validation-error" type="text" name="username" 
                           required="" id="UserName" value="some value">

您可以根据需要向此CSS类添加任何样式。

.input-validation-error
{
    border-color:red;
}

现在将焦点设置在特定输入字段上有些棘手。服务器代码无法做到这一点。您必须在客户端执行此操作。但是，如果表单中有多个字段验证失败，那么您要关注哪个字段？第一个，第二个？最后一个？

这里是一个快速示例，重点介绍input-validation-error CSS类的第一个输入元素。 JavaScript代码是在jquery document.ready事件上执行的。

$(function () {
    $("input.input-validation-error").first().focus();
});

如果要设置验证帮助器（<span asp-validation-for="UserName"></span>）呈现的验证错误消息的样式，请遵循相同的方法。验证失败时，框架会将此span元素的CSS类更改为field-validation-error（从field-validation-valid）。因此，您要做的就是将所需的样式定义添加到该CSS类中。

.field-validation-error
{
    color:red;
}

如何将特定样式应用于无效字段？

1 个答案: