7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】フォームのエラーメッセージを入力項目ごとに表示する

Posted at

実現したいこと

次の画像のようにフォームにある入力項目一つ一つに対してエラーメッセージを表示させます。
スクリーンショット 2020-05-27 6.40.32.jpg

localesでの日本語化もしていますが、こちらのインストールなどについてはカバーしていないので知りたい場合は参考のURLなどから確認してください。

環境

ruby: 2.7.1
rails: 6.0.2.2

コード

エラーメッセージ表示のパーシャルを作成

modelとattributeを変数にすることで使いまわせるようにしています。
errors.full_messages_forを利用して入力項目に対応したエラーメッセージのみを表示します。
/app/views/layouts/_error_messages.html.erb

_error_messages.html.erb
<% if model.errors.any? %>
  <div class="alert alert-warning">
    <ul>
      <% model.errors.full_messages_for(attribute).each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

フォームのパーシャルを作成

これは場合によると思いますが、フォームは基本new、editで使い回すことになると思うのでパーシャルにします。
「model: @form, attribute: :date」で入力項目ごとの値を指定すれば対応したエラーメッセージのみ表示可能です。

/app/views/logs/_form.html.erb

_form.html.erb
<%= form_with model: @form, local: true do |f| %>

  <div class="field">
    <%= f.label :date, "日付" %>
    <%= f.date_select :date, use_month_numbers: true, start_year: Time.now.year - 20, end_year: Time.now.year %>
  <!-- エラーメッセージの呼び出し -->
    <%= render "layouts/error_messages", model: @form, attribute: :date %>
  </div>

<!-- ~略~ -->

エラーメッセージの日本語化

このままではエラーメッセージが「Dateは1文字以上で入力してください」のように表示されるので、対応する日本語を指定して日本語化します。
/config/locales/ja.yml

ja:
  activerecord:
    models:
      form: "フォーム"
    attributes:
      log:
        date:               "日付"
        country:            "国"
        prefecture:         "都道府県"
        area:               "地域"
        point:              "ポイント"

ビューの表示

使用する場所でフォームを呼び出して終了です。
/app/views/logs/new.html.erb

new.html.erb
<h1>フォーム</h1>
<%= render 'form' %>

後書き

この手の表示は皆さんしていることだと思うのでもっと簡単な方法やGemなどあるのかもしれませんが見つけられなかったのでこのような感じに実装してみました。
参考の一つにあるのですが、そのうちajaxでリアルタイムに表示させられるようにしたいですね。

参考

【Rails】バリデーションのエラーメッセージを表示する
バリデーションの日本語表示の仕方
Rails エラーメッセージの表示
rails で日本語化をしているのですが、attributesの日本語化が適用されません
Railsでajax通信時にattribute名とfull_messageの組み合わせでレスポンスを返す

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?