如何使用类自定义设计错误消息答案

【问题标题】：how to customize devise error messages with classes如何使用类自定义设计错误消息
【发布时间】：2012-04-20 06:45:59
【问题描述】：

我正在使用 Twitter 的引导警报消息。在我的 application.html.erb 我有...

            <% flash.each do |key, value| %>
                <div class="alert alert-<%=key%>">
                    <a class="close" data-dismiss="alert">×</a>
                    <%= value %>
                </div>
           <% end %>

通常当我想做一个闪信时，我会写类似的东西

flash[:success] = "Profile updated"

但是我不确定如何为设计错误消息提供键值对。我查看了 devise.en.yml 但似乎无法将消息与密钥相关联，即：成功，：错误等。有人可以帮忙吗？谢谢！

【问题讨论】：

标签： ruby-on-rails devise twitter-bootstrap

【解决方案1】：

对于遇到此问题但不知道如何使用引导程序覆盖设计错误消息的任何人。

创建文件名为：

/app/helpers/devise_helper.rb

添加以下代码：

module DeviseHelper
 def devise_error_messages!
  return '' if resource.errors.empty?

   messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
   sentence = I18n.t('errors.messages.not_saved',
   count: resource.errors.count,
   resource: resource.class.model_name.human.downcase)

   html = <<-HTML
   <div class="alert alert-error alert-block"> <button type="button"
    class="close" data-dismiss="alert">x</button>
    <h4>#{sentence}</h4>
    #{messages}
   </div>
   HTML

   html.html_safe
 end
end

【讨论】：

非常酷，谢谢！这是我的问题把我带到了这里。
请注意，根据您使用的 Bootstrap 版本，您可能必须使用 alert-danger 而不是 alert-error。因此，如果您逐字尝试 Francois 的建议并获得白色背景而不是粉红色/红色，这可能就是原因。

【解决方案2】：

我就是这样做的

<% flash.each do |key, value| %>
<div class="message">
   <div class="alert-message <%= key %> fade in">
    <a class="close" href="#">&times</a>
    <center><strong><%= value %></strong></center>
  </div>
</div>
<% end %>

【讨论】：

哦，消息显示正确，但所有内容都显示为黄色框。我希望能够给它一个绿色的盒子，就像一个成功的版本。通常我会通过添加 flash[:success] 或者如果我想要一个红框 flash[:error]
我明白了。您所要做的就是覆盖通常发送消息的控制器。

【解决方案3】：

我发现的最简单的解决方案是在检查 :notice 和 :alert 以替换为必要的引导类时对所有闪存消息使用通用部分。

所以让/views/shared/_alerts.html.erb 像这样 -

<% flash.each do |message_type, message| %>
 <div class="alert alert-<%= flash_class_name(message_type) %> alert-dismissable">
  <span><%= message %></span>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
 </div>
<% end %>

像这样添加一个辅助方法（我已经将它添加到应用程序帮助器中）-

def flash_class_name(name)
  case name
  when "notice" then "success"
  when "alert"  then "danger"
  else name
  end
end

在应用程序布局（或应用程序的父布局）中包含_alerts.html.erb。

就是这样！

【讨论】：

【解决方案4】：

问题是devise_error_messages! 本身将数据包装到带有class='alert' 的div 中，因此表单将有2 个嵌套的具有相同类的div。按下x 按钮将关闭嵌套的div，留下空的div 样式为alert。为避免这种情况，您可以省略帮助器返回值中的 div，如下所示：

module DeviseHelper
  def devise_error_messages!
    return '' if resource.errors.empty?

    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join

    html = <<-HTML
      <button type="button" class="close" data-dismiss="alert">x</button>
      #{messages}
    HTML

    html.html_safe
  end
end

【讨论】：