Как применить определенный стиль к недопустимому полю?

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

Если проверка модели завершится неудачно и вы вернетесь к тому же представлению, платформа добавит класс CSS input-validation-error к элементам ввода, для которых проверка не удалась.В вашем случае вы добавляете сообщение об ошибке в поле 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>), следуйте тому же подходу.При сбое проверки среда меняет класс CSS этого элемента span на field-validation-error (с field-validation-valid).Поэтому все, что вам нужно сделать, это добавить необходимые определения стилей в этот класс CSS.

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