22

有没有办法告诉 Rails 不要div.field_with_errors围绕标签和实际字段创建，而是div.error围绕它们创建？

例如，从我的视图中提取的表单（用 HAML 编写）

= form_for @user do |f|
  %div.clearfix
    = f.label :name
    %div.input
      = f.text_field :name

我希望在错误的情况下根 div 是div.clearfix.error并避免这种情况field_with_errors。我可以这样做吗？

作为另一种选择，我可以使用 formtastic 来创建Bootstrap样式的元素，没有 formtastic 的 css 和 html 类，但使用 bootstrap 的。在使用formtastic的情况下，我可以用错误字段做一些事情吗？

4

14 回答 14

17

@flowdelic 的答案似乎是最简单的解决方法。但是，名称不正确。这可能是由于 Rails/Bootstrap 版本，但这对我有用。

/* Rails scaffold style compatibility */
#error_explanation {
  @extend .alert;
  @extend .alert-error;
  @extend .alert-block; /* optional */
}

.field_with_errors {
  @extend .control-group.error
}
于 2012-05-18T11:14:42.927 回答
9

创建config/initializers/field_with_errors.rb：

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  "<div class=\"error\">#{html_tag}</div>".html_safe
end

这将交换.field-with-errors为.error.

但是，我发现“Rails-way”的最大问题是它用新的包装元素，div而不是简单地将类添加到元素本身。我更喜欢这个：

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  parts = html_tag.split('>', 2)
  parts[0] += ' class="field_with_errors">'
  (parts[0] + parts[1]).html_safe
end
于 2016-10-17T19:09:15.033 回答
7

if anyone uses LESS:

in bootstrap_and_overrides.css.less you can add:

#error_explanation {
  .alert();
  .alert-error();
  .alert-block();
}

.field_with_errors {
  .control-group.error();
}

which is the LESS version of the shown sass example.

于 2012-11-20T10:30:59.393 回答
5

当使用https://github.com/anjlab/bootstrap-rails gem时，这适用于 Bootstrap 3 。

.field_with_errors {
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}
于 2013-09-12T09:48:01.780 回答
4

这是我对 bootstrap 3.0.3 和 rails 4.0.2 所做的：

/* Rails scaffold style compatibility */
#error_explanation {
  @extend .alert;
  @extend .alert-danger;
  width: inherit;
}

.field_with_errors {
  @extend .has-error;
  display: inherit;
  padding: inherit;
  background-color: inherit;
}
于 2014-01-07T20:55:40.483 回答
3

如果您将 SASS 与 Twitter Bootstrap 一起使用，则可以使用 @extend 指令将 Twitter Bootstrap 样式应用于 Rails 生成的 CSS 类。（搜索 GitHub，有几个可用的 Bootstrap/SASS 端口。）

例如：

@import "bootstrap";

/* Rails scaffold style compatibility */
.errorExplanation {
  @extend .alert-message;
  @extend .block-message;
  @extend .error;
}

.fieldWithErrors {
  // pulled from div.clearfix.error
  @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
}

请注意，“错误”的 Twitter Bootstrap 样式附加到 div.clearfix 选择器，这会阻止我们简单地这样做：

.fieldWithErrors {
  @extend .error;
}

因此，相反，我将 Bootstrap 中 div.clearfix.error 定义中的代码复制/粘贴到我的 .fieldWithErrors 选择器中。

于 2012-01-05T15:02:26.153 回答
1

我没有足够的评论，所以我会在这里回答：

bootstrap_and_overrides.css.scss要添加@iosctr 的答案——只有在我添加到我的文件后，css 才开始工作：

@import "bootstrap";
body { padding-top: 40px; }
@import "bootstrap-responsive";

#error_explanation {
  @extend .alert;
  @extend .alert-error;
  @extend .alert-block; 
}

.field_with_errors {
  @extend .control-group.error;
}
于 2013-06-26T23:45:38.243 回答
1

下面是我想出的。

我将此添加到我的CSS

.field_with_errors {
    display:inline;
    margin:0px;
    padding:0px;
}

我将此添加到<head>

$(function(){
    $('.field_with_errors').addClass('control-group error');
});
于 2012-11-13T19:48:22.967 回答
1

使用 bootstrap 3.0，类是has-error. @oded 的解决方案应该是：

$('.field_with_errors').parent().addClass('has-error');
于 2013-10-12T18:35:54.990 回答
0

对于所有这些混乱，有一个非常简单的解决方案。它是基于 javascript 的，但它解决了我的问题 - 只需添加这个（当你使用水平形式时）：

$(document).ready(function() {
    $('.field_with_errors').parent().addClass('error');
});

它基本上采用默认的 Rails 行为并将其转换为 Bootstrap 行为。将错误类添加到control-group它所属的位置。没有css也没有覆盖默认值field_error_proc。

于 2013-06-24T17:26:20.013 回答
0

您可以使用Formtastic Bootstrap gem 通过 Formtastic 创建 Twitter Bootstrap 友好的标记。

于 2011-12-12T15:36:41.237 回答
0

它实际上比你想象的更令人恼火。

我最终创建了自己的标签助手（我也需要它用于其他目的），尽管我刚开始只是覆盖ActionView::Base.field_error_proc. （这本身就是一个故事，因为它以字符串形式传递，实际上并不是您可以可靠地摆弄的东西:(

但是从那开始，看看它是否对你足够，否则准备一些挖掘和调整。

于 2011-09-17T14:01:54.653 回答
0

Bootstrap 3 和 Rails 4——我必须做到以下几点：

.alert-error{
    color: #f00;
    @extend .alert;
    @extend .alert-danger;
}

#error_explanation
{   ul
    {
        list-style: none;
        margin: 0 0 18px 0;
        color: red
    }
}

.field_with_errors
{
    input {
    border: 2px solid red;
    }
}
于 2014-08-30T00:56:02.707 回答
0

是的，您可以破解包装器 div。借用这个提示，我对其进行了修改，以将包装器转换为invalid标签上的类并自行形成输入......

把它放在你的配置中的某个地方（例如environments.rb）

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  (html_tag.gsub /class="(.*?)"/, 'class="\1 invalid"').html_safe
end
于 2020-08-03T12:52:27.027 回答