deviseで発生するエラーメッセージのBootstapっぽくしたかったので、その方法をφ(..)メモメモ

事象

deviseでは、通常エラーメッセージをdevise内で定義されているdevise_error_messages!で表示させるため、class等を設定し、レイアウトを調整することは出来ない。

f:id:madogiwa0124:20170610103432p:plain

対処法

devise_error_messages!とは別にメソッドをHelperに定義し、エラーメッセージを返却すれば良い。

application_helper.rb

  # デバイスのエラーメッセージ出力メソッド
  def devise_error_messages
    return "" if resource.errors.empty?
    html = ""
    # エラーメッセージ用のHTMLを生成
    messages = resource.errors.full_messages.each do |msg|
      html += <<-EOF
        <div class="error_field alert alert-danger" role="alert">
          <p class="error_msg">#{msg}</p>
        </div>
      EOF
    end
    html.html_safe
  end

view

<%= devise_error_messages %>
    <h1>アカウント情報</h1>
    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
      <div class="myinfo_form">
        <div class="form-group">
          <%= f.label :email %>
          <%= f.email_field :email, autofocus: true, class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :password %>
          <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :password_confirmation %>
          <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :current_password %>
          <%= f.password_field :current_password, autocomplete: "off", class: "form-control" %>
        </div>
        <div class="form-group">
          <%= f.label :send_mail %>
          <%= f.check_box :send_mail %>
        </div>
        <div class="actions">
          <%= f.submit "更新する", class: "btn btn-primary" %>
        </div>
      </div>
    <% end %>