样式表错误消息 - bootstrap/rails答案

【问题标题】：Styling form error message - bootstrap/rails样式表错误消息 - bootstrap/rails
【发布时间】：2013-02-15 20:17:27
【问题描述】：

我的 rails 表单的错误消息在 bootstrap 中看起来很糟糕。有谁知道更好（漂亮）错误消息的解决方案？我使用 Rails 和 Bootstrap。

我的表单（它是一个助手）是这样的：

<%= form_for(@user) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-inline">
    <%= f.text_field :email, class:'input-large', placeholder:'Test' %>
<!--   </div>
  <div class="actions"> -->
    <%= f.submit class:'btn btn-large btn-success' %>
  </div>
<% end %>

【问题讨论】：

标签： ruby-on-rails-3 forms twitter-bootstrap

【解决方案1】：

看看 Michael Hartl 在 railstutorial 中是如何做到的。

这就是使用的css：

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

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

他描述了一切here。

如果您还想在每行的开头添加小星星，则必须将其包含在表单中：

     <div id="error_explanation">
        <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
        <ul>
          <% @user.errors.full_messages.each do |msg| %>
            <li> * <%= msg %></li>    <--- insert here
          <% end %>
        </ul>
     </div>
      ...

【讨论】：

在开始时搭建一个表单并在之后重构代码绝对好 - 这样您就有了一个干净的第一次设置。 KentTucky 提到观看 Michael Hartl 的过程是一个非常好的输入。谢谢你，@KentTucky。
这需要包含 Bootstrap 源 SASS 代码。这使您的 JS 和 CSS 编译资产变得更大。因为.error和.control-group不可用，所以不能使用CDN版本。
在 Bootstrap 4 中，我们应该在输入上扩展 .is-invalid 类。我得到了这个与.field_with_errors input { @extend .is_invalid }

【解决方案2】：

我意识到有点晚了，但我今天刚刚使用 Rails 4 和 Bootstrap 3 遇到了这个问题，我最终制作了一个视图助手来使用面板显示错误：

Rails 4 / Bootstrap 3

def errors_for(object)
    if object.errors.any?
        content_tag(:div, class: "panel panel-danger") do
            concat(content_tag(:div, class: "panel-heading") do
                concat(content_tag(:h4, class: "panel-title") do
                    concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
                end)
            end)
            concat(content_tag(:div, class: "panel-body") do
                concat(content_tag(:ul) do
                    object.errors.full_messages.each do |msg|
                        concat content_tag(:li, msg)
                    end
                end)
            end)
        end
    end
end

Rails 4 / Bootstrap 4 测试版

def errors_for(object)
    if object.errors.any?
        content_tag(:div, class: "card border-danger") do
            concat(content_tag(:div, class: "card-header bg-danger text-white") do
                concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
            end)
            concat(content_tag(:div, class: "card-body") do
                concat(content_tag(:ul, class: 'mb-0') do
                    object.errors.full_messages.each do |msg|
                        concat content_tag(:li, msg)
                    end
                end)
            end)
        end
    end
end

Rails 4 / Bootstrap 4 Beta 列表组变体

def errors_for(object)
    if object.errors.any?
        content_tag(:div, class: "card border-danger") do
            concat(content_tag(:div, class: "card-header bg-danger text-white") do
                concat "#{pluralize(object.errors.count, "error")} prohibited this #{object.class.name.downcase} from being saved:"
            end)
            concat(content_tag(:ul, class: 'mb-0 list-group list-group-flush') do
                object.errors.full_messages.each do |msg|
                    concat content_tag(:li, msg, class: 'list-group-item')
                end
            end)
        end
    end
end

我将它放在 application_helper 中并在我的表单视图中调用它

<%= errors_for(@user) %>

也许有人会偶然发现它并发现它很有用。

【讨论】：

也许您可以添加您的消息的屏幕截图？

【解决方案3】：

以防万一有人在这里绊倒并将Bootstrap 4 alpha 与rails 5 和bootstrap_form_for gem 一起使用。我用：

<div class="form-group">
  <%= f.alert_message "Please fix the errors below." %>
</div>

看起来真不错。

【讨论】：

【解决方案4】：

我已经在 Rails 5 和 Bootstrap 4 中实现了Rabbott's view helper：

def errors_for(object)
    if object.errors.any?
      content_tag(:div, class: 'card text-white bg-danger mb-3') do
        concat(content_tag(:div, class: 'card-header') do
          concat(content_tag(:h4) do
            concat "#{pluralize(object.errors.count, 'error')} prohibited this #{object.class.name.downcase} from being saved:"
          end)
        end)
        concat(content_tag(:div, class: 'card-body') do
          concat(content_tag(:ul) do
            object.errors.full_messages.each do |msg|
              concat content_tag(:li, msg)
            end
          end)
        end)
      end
    end
  end

它看起来像这样：

【讨论】：

【解决方案5】：

引导程序 4 阿尔法 6

我从

复制了编译后的 Bootstrap CSS

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css

搜索.has-danger，复制所有类，在.has-danger 上搜索和替换.field_with_errors，我还添加了.field_with_errors label

.field_with_errors label,
.field_with_errors .form-control-feedback,
.field_with_errors .form-control-label,
.field_with_errors .col-form-label,
.field_with_errors .form-check-label,
.field_with_errors .custom-control {
  color: #d9534f;
}

.field_with_errors .form-control {
  border-color: #d9534f;
}

.field_with_errors .input-group-addon {
  color: #d9534f;
  border-color: #d9534f;
  background-color: #fdf7f7;
}

.field_with_errors .form-control-danger {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
}

我无法让输入组插件正确显示，因为它使用 <div> 包装输入。

文档：https://v4-alpha.getbootstrap.com/components/forms/#validation

老实说，其中一些类没有被使用，因为 Rails 没有明显的方法来设置错误字段的类。

对于错误列表，我只是使用了这个简单的类

#error_explanation {
  color: red;
}

【讨论】：

【解决方案6】：

也许更简单的方法是在表单本身上搜索 id 和类。适用于任何组合。

默认情况下，这是脚手架中包含的用于排列错误消息的行。您可以随心所欲地使用它们。只需在您的 css.scss 文件中扩展它们：

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#error_explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px -7px 0;
  background-color: #c00;
  color: #fff;
}

#error_explanation ul li {
  font-size: 12px;
  list-style: square;
}

如果出现问题，请在开发人员模式下检查导航器。在那里你应该能够找到所有正在创建的 html 和 css rails...

【讨论】：

【解决方案7】：

另一种仅使用 SCSS 的变体

#error_explanation{
  background: #f23551;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  h2{
    padding: 20px;
    margin: 0;
    font-size: 20px;
  }
  ul{
    background: #fff;
    color: #e5324a;
    border: 1px solid #F23551;
    margin: 0;
    list-style: none;
    padding: 14px 0;
    li{
      padding: 4px 20px;
      &:before {
        content: '×';
        font-weight: bold;
        font-size: 20px;
        margin-right: 10px;
      }
    }
  }
}

【讨论】：

【解决方案8】：

我创建了一个自定义初始化程序，让每个字段在其下方都有自己的错误

# app/config/initializers/bootstrap_form_errors_customizer.rb

ActionView::Base.field_error_proc = proc do |html_tag, instance|
  is_label_tag = html_tag =~ /^<label/
  class_attr_index = html_tag.index 'class="' 

  def format_error_message_to_html_list(error_msg)
    html_list_errors = "<ul></ul>"
    if error_msg.is_a?(Array)
      error_msg.each do |msg|
        html_list_errors.insert(-6,"<li>#{msg}</li>")
      end
    else 
      html_list_errors.insert(-6,"<li>#{msg}</li>")
    end
    html_list_errors
  end

  invalid_div =
    "<div class='invalid-feedback'>#{format_error_message_to_html_list(instance.error_message)}</div>"

  
  if class_attr_index && !is_label_tag
    html_tag.insert(class_attr_index + 7, 'is-invalid ')
    html_tag + invalid_div.html_safe
  elsif !class_attr_index && !is_label_tag
    html_tag.insert(html_tag.index('>'), ' class="is-invalid"')
    html_tag + invalid_div.html_safe
  else
    html_tag.html_safe
  end
end

【讨论】：