こんにちは!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