Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

[Rails] field_error_proc を使ってバリデーションエラーの表示をいい感じにする

More than 1 year has passed since last update.

背景

  • Rails では、バリデーションエラーのあった項目はデフォルトで <div class="field_with_errors"> で囲まれる
  • この挙動は、 config/application.rbconfig.action_view.field_error_proc を指定することで変更できる
    • 意図しない <div> が入ることでデザインが崩れるとか、 Bootstrap を使っているときに .has-error をつけたいとか気になったら動作を変えたくなってくる
  • config.action_view.field_error_proc と検索すると「 <div class="field_with_errors"> をつけないようにする」とか「class名を field_with_errors から変える」ようなものばかりがヒットする。
    • → 実はもっといろんなことができる!

やりたいこと

ということで、バリデーションエラーがあったらテキストフィールドのすぐ下にエラーメッセージを表示するようにしてみましょう。

この例では Bootstrap を使っているので、

  • フィールド全体を .has-error で囲む
  • エラーメッセージは Validation states のように .help-block を使って表示する

という方針で実装しました。

結果

config/application.rb に実装するだけで期待通りに動きます:

config/application.rb
    config.action_view.field_error_proc = Proc.new do |html_tag, instance|
      if instance.kind_of?(ActionView::Helpers::Tags::Label)
        # skip when label
        html_tag.html_safe
      else
        "<div class=\"has-error\">#{html_tag}<span class=\"help-block\">#{instance.error_message.first}</span></div>".html_safe
      end
    end

View にはエラーメッセージの表示について一切実装する必要はありません:

view/hoges/new.html.haml
.form-group
  = f.label :name
  %span.label.label-danger 必須
  = f.text_field :name, placeholder: '例:あべ しんぞう', class: 'form-control', required: true

こんなかんじで表示されるようになります:

Kobito.72t7QU.png

解説

  • instanceActionView::Helpers::Tags::Base のサブクラスになるっぽい
  • instance のクラスを調べることによって、ラベルの場合には何もせずそのまま返す
  • instance.error_message にバリデーションの内容が入っているので、取り出す

参考文献

m3dev
インターネット、最新IT技術を活用し日本・世界の医療を改善することを目指します
https://m3.recruitment.jp/engineer/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away