Question

我有一个MVC剃刀视图页面，其中包含一个表单和一些带有数据注释的字段：

<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">但在radiobutton div中我没有has-error类。发生了什么？如果我为另一个控件（例如textboxfor）更改radiobuttonfor，则将该类添加到div中并且颜色相同。 enter image description here

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：抱歉我的英语很差，希望对你有帮助！

单选按钮验证时，css类has-error未添加到div

1 个答案: