Sass/Rails与Bootstrap 3表单验证

Question

我有一个表单，当它没有正确填写时，Rails会将其包装在“field_with_errors”类中。我有一个css.scss文件，在其中导入了Bootstrap，并且我想扩展field_with_errors以使用Bootstrap 3的表单验证样式。我找到了这个：

.field_with_errors {
    @extend .control-group;
    @extend .error;
}

但是它没有起作用，所以我发现这些类是Bootstrap 2类。因此，我找到了它们的等价物：

.field_with_errors {
    @extend .form-group;
    @extend .has-error;
}

但是这似乎没有任何效果。我对Rails和Sass完全不熟悉，有人可以给我指点一下吗？

- NathanTempelman

---

你确定这些类都被放在表单元素上了吗？ - aaronmallen

是的，在我的scaffold.css.scss文件中有一些.field_with_errors的样式，它把所有的字段都变成了这种可怕的红色。 - NathanTempelman

这意味着它将类应用于所有字段元素，你能否将.field_with_errors更改为.has-error？ - aaronmallen

我不这么认为。Rails自动创建了那个类。在我的项目文件中搜索，只找到了我的scss文件。 - NathanTempelman

Answer 1

好的，我是一名初学 Bootstrap 的新手，但我已经找到了问题所在。以下是 Bootstrap 源代码中所有针对 has-error 的引用：

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #a94442;
}
.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .input-group-addon {
  color: #a94442;
  background-color: #f2dede;
  border-color: #a94442;
}
.has-error .form-control-feedback {
  color: #a94442;

正如您所看到的，没有纯粹的.has-error样式。我以为可以将其应用于rails生成的类并继续进行。结果发现，您还必须正确命名具有适当的form-control，control-label类的组件。但在您这样做之后，我的代码与使用rails 4的bootstrap 3一起工作。希望这能帮助其他人。

或者，我提出了这种丑陋的方法，只需使其与基本的ruby formhelper表单一起工作。它不干净，但更少麻烦。

在custom.css.scss或您进行css样式设置的任何位置：

.field_with_errors {

  input{
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }
  label {
    color: #a94442;
  }
}

- NathanTempelman

Answer 2

你可以使用这段代码片段：

``` .field-with-errors { @extend .has-error; } ```

- Pioz

---

请在类名中使用破折号而不是下划线。这对我很有效。 - Pioz