javascript - css class has-error 当单选按钮有验证时没有被添加到 div

Question

我有一个 MVC razor View 页面，其中包含一个表单和一些带有数据注释的字段，如下所示:

<form....>
<div class="form-group">
     <label class="control-label">Fecha de nacimiento</label>
     <div class="row">
         <div class="col-xs-4">
              @Html.DropDownListFor(m => m.BirthDay, Model.Days, "Día", new { @class = "form-control" })
              @Html.ValidationMessageFor(m => m.BirthDay)
         </div>
         <div class="col-xs-4">
               @Html.DropDownListFor(m => m.BirthMonth, Model.Months, "Mes", new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.BirthMonth)
         </div>
         <div class="col-xs-4">
               @Html.DropDownListFor(m => m.BirthYear, Model.Years, "Año", new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.BirthYear)
         </div>
     </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.Gender, new { @class = "control-label" })
    <div class="row">
        <div class="col-xs-4">
            <label class="radio control-label">@Html.RadioButtonFor(m => m.Gender, "Female") Mujer</label>
         </div>
         <div class="col-xs-8">
            <label class="radio control-label">@Html.RadioButtonFor(m => m.Gender, "Male") Hombre</label>
         </div>
    </div>
    @Html.ValidationMessageFor(m => m.Gender)
</div>
<button type="submit">
</form>

我的问题是，当我点击提交时，有错误的字段会使用他各自的错误消息进行验证，但在 RadioButtonFor 字段的情况下，样式与其他表单字段不同。检查 HTML 我发现在主 div 上的其他字段中 <div class="form-group has-error">但在单选按钮 div 中我没有 has-error 类。发生了什么？如果我更改另一个控件(如 textboxfor)的 radiobuttonfor，则该类将添加到 div 并且颜色相同。

Answer 1

检查一下，这对我很有帮助:

https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/euCdyWpCrKU

好的!对我有用的解决方案是覆盖数据注释 css 类。因此，对于不显眼的 ajax js 检测到的每个验证...警报样式将是这样的:

如果你用得少，这很容易。只需添加到 bootstrap.less 的末尾:

.validation-summary-errors
{
    .alert();
    .alert-danger();
}
.field-validation-error 
{
    .label();
    .label-danger();
}

如果您使用 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;
} 

PD:抱歉我的英语不好，希望对你有帮助!