deviseのエラーメッセージ にbootstrapを当てたい

こんにちは!kossyです!




さて、今回はRailsの認証系機能を提供しているgem「devise」のエラーメッセージ に
cssフレームワークであるbootstrapを当てたい時の方法をブログに残してみたいと思います。





なお、devise及びbootstrapの導入方法については割愛してます。
このブログを読んでくださる方はエラーメッセージ の当て方について解を求めている方だと思いますので。



環境



devise_error_messages!をオーバーライド



bootstrapを適用したエラーメッセージ を表示するには、いくつかやり方がありますが、
ここでは、devise_error_messages!をオーバーライドする形を取りたいと思います。



app/helpers/application_helper.rb

module ApplicationHelper

  def devise_error_messages
    return "" if resource.errors.empty?
    errors_html = ""
    resource.errors.full_messages.each do |err_msg|
      errors_html += <<-EOF
        <div class="error_field alert alert-danger" role="alert">
          <p class="error_msg">#{err_msg}</p>
        </div>
      EOF
    end
    errors_html.html_safe
  end

end


html_safeはエスケープを行いたくない場合に使用するStringクラスのメソッドです。


ユーザー登録フォームの例はこんな感じです。(hamlで書いてます)

app/views/devise/registrations/new.html.haml

= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f|
  = devise_error_messages
  .form-group
    = f.label :name, "名前"
    = f.text_field :name, autofocus: true, class: "form-control"
  .form-group
    = f.label :email, "メールアドレス"
    = f.email_field :email, autofocus: true, class: "form-control"
  .form-group
    = f.label :profile_photo, "アイコン"
    = f.file_field :profile_photo, autofocus: true, class: "form-control"
  .form-group
    = f.label :password, "パスワード"
    = f.password_field :password, autofocus: "off", class: "form-control"
  .form-group
    = f.label :password_confirmation, "パスワードの確認"
    = f.password_field :password_confirmation, autofocus: "off", class: "form-control"
  .actions
    = f.submit "登録する", class: "btn btn-primary w-100"

デフォルトでは

devise_error_messages!

ですが、オーバーライドしたメソッドを使うため、!を消してます。



参考にさせていただいたサイト
RubyonRails:deviseのエラーメッセージをカスタマイズする方法 - Madogiwa Blog
[Rails]ERBのエスケープを自在に扱おうぜ - Qiita