How to apply bootstrap v4 form input validation classes with the ASP.NET Razor syntax?

Question

The following code:

View:(is-valid)

<div class="form-group">
    @Html.LabelFor(m => m.Telefone, new { @class = "font-weight-bold" })
    @Html.TextBoxFor(m => m.Telefone, new { @class = "form-control is-valid", @placeholder = "Digite seu telefone" })
    @Html.ValidationMessageFor(m => m.Telefone, "", new { @class = "text-danger" })
</div>

View:(is-invalid)

<div class="form-group">
    @Html.LabelFor(m => m.Telefone, new { @class = "font-weight-bold" })
    @Html.TextBoxFor(m => m.Telefone, new { @class = "form-control is-invalid", @placeholder = "Digite seu telefone" })
    @Html.ValidationMessageFor(m => m.Telefone, "", new { @class = "text-danger" })
</div>

Example: https://getbootstrap.com/docs/4.3/components/forms/#server-side

Any solution ?

Answer 1

类名是硬编码的：https://github.com/dotnet/aspnetcore/blob/v3.1.6/src/Mvc/Mvc.ViewFeatures/src/HtmlHelper.cs#L25

唯一的选择是更改 CSS。

当您从源代码构建 Bootstrap 时，您只需将以下代码添加到 SCSS 文件中：

.input-validation-error {
  @extend .is-invalid;
}

这将为现有的 .is-invalid 创建一个别名。

Answer 2

使用标签助手的简单解决方案：

        <div class="form-group">
            <input asp-for="Email" class="form-control">
            <div class="invalid-feedback" style="display:block;">
                <span asp-validation-for="Email"></span>
            </div>
        </div>

Answer 3

请务必包含：“jquery .js jquery.validate .js jquery.validate.unobtrusive .js”