javascript - 如何在使用数据注释时合并 Bootstrap has-error 类

Question

如何在使用数据注释时将 Bootstrap 的 has-error css 类添加到出现表单错误的容器 div？

我的 View 模型类中有以下属性:

[Display(Name = "First Name")]
[Required(ErrorMessage = "Required")]
public string FirstName { get; set; }

名字是必填字段。当用户单击提交按钮且未填写任何内容时，Required 错误消息将显示在文本框下方。文本框的边框显示为红色。这是我的 CSS:

.field-validation-error
{
     color: #b94a48;
}

input.input-validation-error
{
     border: 1px solid #b94a48;
}

这是我的 Razor 和 HTML 标记:

<div class="form-group">
     @Html.LabelFor(m => m.FirstName, new { @class = "col-lg-2 control-label" })
     <div class="col-lg-4">
          @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", placeholder = "Enter first name" })
          @Html.ValidationMessageFor(m => m.FirstName)
     </div>
</div>

我想要实现的是，当出现错误时，例如像我上面解释的那样，我需要 HTML 标记看起来像这样:

<div class="form-group has-error">
</div>

我怎样才能实现这样的目标？

我正在使用 ASP.NET MVC 5 和最新版本的 Bootstrap。

Answer 1

为了自己解决这个问题，我创建了一个 CSS 类，如下所示:

.has-error .form-control,
.input-validation-error {
   border: 1px solid #f44336 !important;
   -webkit-box-shadow: none !important;
   -ms-box-shadow: none !important;
   box-shadow: none !important;
}

它覆盖了 ASP.NET 放在有问题的表单控件上的 .input-validation-error 类。不需要 Javascript。它对我有用。希望对您有所帮助。