twitter-bootstrap 如何在使用数据注释时在错误时合并 Bootstrap has-error 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20493263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to incorporate Bootstrap has-error class on error while using data annotations
提问by Brendan Vogt
How do I add Bootstrap's has-errorcss class to a container div on a form error while using data annotations?
has-error使用数据注释时，如何在表单错误时将 Bootstrap 的css 类添加到容器 div？
I have the following property in my viewmodel class:
我的 viewmodel 类中有以下属性：
[Display(Name = "First Name")]
[Required(ErrorMessage = "Required")]
public string FirstName { get; set; }
First name is a required field. When the user clicks the submit button and nothing has been filled in then the Required error message is displayed beneath the textbox. The textbox's border is displayed in a reddish colour. Here is my css:
名字是必填字段。当用户单击提交按钮并且没有填写任何内容时，所需的错误消息将显示在文本框下方。文本框的边框以红色显示。这是我的CSS：
.field-validation-error
{
color: #b94a48;
}
input.input-validation-error
{
border: 1px solid #b94a48;
}
Here is my Razor and HTML markup:
这是我的 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>
What I am trying to achieve is that when there is an error, for example like what I explained above then I need the HTML markup to look something like this:
我想要实现的是，当出现错误时，例如像我上面解释的那样，我需要 HTML 标记看起来像这样：
<div class="form-group has-error">
</div>
How would I achieve something like this?
我将如何实现这样的目标？
I am using ASP.NET MVC 5and the latest version of Bootstrap.
我正在使用ASP.NET MVC 5最新版本的Bootstrap.
回答by AVenger
To solve this issue for myself, I created a CSS class as follows:
为了自己解决这个问题，我创建了一个 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;
}
It overrides the .input-validation-errorclass that ASP.NET puts on the form control that has an issue. No Javascript needed. It worked for me. I hope it helps you out.
它覆盖了.input-validation-errorASP.NET 放在有问题的表单控件上的类。不需要Javascript。它对我有用。我希望它可以帮助你。
回答by Roman Pushkin
If you use less, it's quite easy. Just add to the end of bootstrap.less:
如果您使用较少，则很容易。只需添加到 bootstrap.less 的末尾：
.validation-summary-errors
{
.alert();
.alert-danger();
}
.field-validation-error
{
.label();
.label-danger();
}
If you use CSS, add the following code to your css file:
如果您使用 CSS，请将以下代码添加到您的 css 文件中：
.validation-summary-errors
{
/* alert classes */
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
/* alert danger classes */
color: #b94a48;
background-color: #f2dede;
border-color: #ebccd1;
}
.field-validation-error
{
/* label classes */
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #ffffff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
/* label danger classes */
background-color: #d9534f;
}
These are valid classes for the latest Bootstrap (3rd version). It will look like this:
这些是最新 Bootstrap（第 3 版）的有效类。它看起来像这样：
