Question

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

E.g。我的观点与表格的片段（用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的情况下，我可以创建带错误字段的内容吗？

Answer 1

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

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

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

Answer 2

如果有人使用LESS：

在bootstrap_and_overrides.css.less中你可以添加：

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

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

这是所示sass示例的LESS版本。

Answer 3

当使用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);
}

Answer 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;
}

Answer 5

如果您在Twitter Bootstrap中使用SASS，则可以使用@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%));
}

请注意，'error'的Twitter Bootstrap样式附加到div.clearfix选择器，这阻止我们简单地执行此操作：

.fieldWithErrors {
  @extend .error;
}

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

Answer 6

使用以下内容创建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

Answer 7

以下是我的想法。

我将此添加到我的css

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

我将此添加到<head>

$(function(){
    $('.field_with_errors').addClass('control-group error');
});

Answer 8

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

要添加@iosctr的答案 - 只有在我添加到bootstrap_and_overrides.css.scss文件后，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;
}

Answer 9

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

$('.field_with_errors').parent().addClass('has-error');

Answer 10

它实际上比你想象的更刺激。

我最终创建了自己的标记助手（我还需要其他用途），尽管我刚刚开始重写ActionView::Base.field_error_proc。（这是一个故事本身，因为它传入一个字符串，而不是你可以可靠地摆弄的东西:(

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

Answer 11

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

Answer 12

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

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

它基本上采用默认的Rails行为并将其转换为Bootstrap行为。将错误类添加到它所属的control-group。否css并且不会覆盖默认field_error_proc。

Answer 13

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;
    }
}

Answer 14

是的，您可以修改包装器div。从this tipoff借用，我对其进行了修改，将包装器转换为标签上的invalid类，并自行输入表单...

将其放置在配置中的某个位置（例如environments.rb）

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  (html_tag.gsub /class="(.*?)"/, 'class="\1 invalid"').html_safe
end

自定义field_with_errors

14 个答案: