twitter-bootstrap 自定义 field_with_errors

Customizing field_with_errors

提问by Gosha Arinich

Is there a way to tell Rails to not create div.field_with_errorsaround both label and actually field, but to create div.erroraround them both?

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

E.g. snippet from my view with the form (written in HAML)

例如从我的视图中使用表单（用 HAML 编写）的片段

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

I want in the case of error the root div to be div.clearfix.errorand avoid that field_with_errors. Can I do so?

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

As another option, can I make formtastic to create Bootstrap-styled elements, w/o formtastic's css and html classes, but with bootstrap's ones. Can I make something with error fields in the case of using formtastic?

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

回答by iosctr

@flowdelic's answer seems to be the simplest fix. However, the names are incorrect. This may be due to the Rails/Bootstrap version, but this works for me.

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

回答by thedanielhanke

if anyone uses LESS:

如果有人使用 LESS：

in bootstrap_and_overrides.css.less you can add:

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

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

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

which is the LESS version of the shown sass example.

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

回答by asgeo1

This is what works with Bootstrap 3, when using the https://github.com/anjlab/bootstrap-railsgem.

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

.field_with_errors {
  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
}

回答by Leo

Here's what I did with bootstrap 3.0.3 and rails 4.0.2:

这是我对 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;
}

回答by Ryan Anthony

Create config/initializers/field_with_errors.rbwith:

创建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

This will swap .field-with-errorsfor .error.

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

However, the biggest problem I've found with the "Rails-way" is that it wraps the element with a new divinstead of simply adding the class to the element itself. I prefer this:

然而，我发现“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

回答by flowdelic

If you are using SASS with Twitter Bootstrap, you can use the @extend directive to apply the Twitter Bootstrap styles to the Rails generated CSS classes. (Search GitHub, there are several Bootstrap/SASS ports available.)

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

For example:

例如：

@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%));
}

Note that the Twitter Bootstrap style for 'error' is attached to a div.clearfix selector, which prevents us from simply doing this:

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

.fieldWithErrors {
  @extend .error;
}

So, instead, I copied/pasted the code from Bootstrap's definition for div.clearfix.error into my .fieldWithErrors selector.

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

回答by Vadym Tyemirov

I have no enough points to comment, so I will answer here:

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

To add to the answer by @iosctr -- the css began to work only after I added to my bootstrap_and_overrides.css.scssfile:

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

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

回答by Dwight Scott

Below is what I came up with.

下面是我想出的。

I added this to my css

我将此添加到我的 css

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

I added this to the <head>

我将此添加到 <head>

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

回答by Tulio Casagrande

With bootstrap 3.0, the class is has-error. @oded's solution should be:

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

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

回答by Ady

Bootstrap 3 and Rails 4 -- I had to do the following:

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