![](/img/trans.png)
[英]Rails: Form Validation Errors Are Not Showing (with Formtastic and Bootstrap-Sass)
[英]Sass/Rails form validation with Bootstrap 3
我有一个表单,当它没有正确填写时,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完全不熟悉,有人可以给我一个指针吗?
好吧,我是一个很棒的'bootstrap noob,但我发现了问题。 以下是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;
}
}
您可以使用此代码段:
.field-with-errors { @extend .has-error; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.