twitter-bootstrap 使用 Bootstrap 样式化数据验证错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19820467/
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
Styling Data Validation Errors with Bootstrap
提问by Kerem Zaman
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
我正在研究 ASP.NET MVC 4 项目。我想使用 Bootstrap 3.0 在我的登录页面上设置数据验证错误的样式。当我调试页面并出现数据验证错误时，此代码在我的登录表单源中消失了：
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alan? gereklidir." id="UserName" name="UserName" placeholder="Kullan?c? Ad?" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alan? gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alan? gereklidir." id="Password" name="Password" placeholder="?ifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alan? gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giri? Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
如何使用 Bootstrap 3 设置这些错误的样式，例如标签的“for=inputError”属性？
回答by Dmitry Efimenko
As it's shown in Bootstrap's docs, you need to apply class has-errorto the div that contains the input and has class form-group:
正如Bootstrap 的文档中所示，您需要将 class 应用has-error到包含输入并具有 class 的 div form-group：
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-errordepending on the results of that condition, though you can do it like so:
为要检查的每个属性编写一个条件并has-error根据该条件的结果应用类是非常丑陋的，尽管您可以这样做：
<div class="form-group @(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-errorand apply class has-errordepending on the result.
这负责服务器端验证。但是，您还需要考虑客户端验证。为此，您需要编写一些 jQuery 来检查类是否存在field-validation-error并has-error根据结果应用类。
You may do it all your self, though I suggest checking out TwitterBootstrapMVCwhich does all of that automatically for you. All you'd have to write is:
您可以自己完成所有操作，但我建议您查看TwitterBootstrapMVC，它会自动为您完成所有这些操作。所有你必须写的是：
@Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.
免责声明：我是 TwitterBootstrapMVC 的作者。在 Bootstrap 2 中使用它是免费的。对于 Bootstrap 3，它需要付费许可证。
