Как я могу поставить красную рамку вокруг ввода без JS?

Question

<span asp-validation-for="Password" class="text-danger"></span>
<div class="form-group">
    <label asp-for="Password">პაროლი</label>
    @Html.TextBoxFor(x => x.Password, new { type = "password",@class = "form-control" })
    <!-- 
    <input asp-for="Password" class="form-control" />
    -->
</div>

Это пример ввода. Я делаю проверку только на стороне сервера. Как сделать границу поля ввода красной, если пользовательский ввод не подтвержден?

Answer 1

Функция проверки модели добавляет ошибку ввода-проверки CSS-класса ко всем элементам управления, которые не прошли проверки.

Вот пример, на который можно сослаться:

1.Модель

 public class User
{
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }

    [StringLength(8, ErrorMessage = "{0} length must be between {2} and {1}.", MinimumLength = 6)]
    public string Password { get; set; }
}

2.Просмотр

<style type="text/css">

  .input-validation-error {
    border-color: yellowgreen;
  }
</style>

<div class="row">
<div class="col-md-4">
    <form asp-action="Create" class="myForm">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Name" class="control-label"></label>
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>

        <div class="form-group">
            <label asp-for="Password">პაროლი</label>
            <input asp-for="Password" type="password" class="form-control" />
            <span asp-validation-for="Password" class="text-danger"></span>
        </div>


        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>
</div>

@section Scripts
{
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }  
}

Результат:

Ссылка: https://www.yogihosting.com/aspnet-core-model-validation/