実現したいこと
次の画像のようにフォームにある入力項目一つ一つに対してエラーメッセージを表示させます。
localesでの日本語化もしていますが、こちらのインストールなどについてはカバーしていないので知りたい場合は参考のURLなどから確認してください。
環境
ruby: 2.7.1
rails: 6.0.2.2
コード
エラーメッセージ表示のパーシャルを作成
modelとattributeを変数にすることで使いまわせるようにしています。
errors.full_messages_forを利用して入力項目に対応したエラーメッセージのみを表示します。
/app/views/layouts/_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_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
<h1>フォーム</h1>
<%= render 'form' %>
後書き
この手の表示は皆さんしていることだと思うのでもっと簡単な方法やGemなどあるのかもしれませんが見つけられなかったのでこのような感じに実装してみました。
参考の一つにあるのですが、そのうちajaxでリアルタイムに表示させられるようにしたいですね。
参考
【Rails】バリデーションのエラーメッセージを表示する
バリデーションの日本語表示の仕方
Rails エラーメッセージの表示
rails で日本語化をしているのですが、attributesの日本語化が適用されません
Railsでajax通信時にattribute名とfull_messageの組み合わせでレスポンスを返す