Rails

バリデーションのエラーメッセージの表示の仕方（Rails）

 
0

今回はエラーメッセージの表示方法について、簡単にまとめてみます。

手順①モデルにバリデーションを設定する。

1
2
3
4
class Daily < ApplicationRecord
  validates :date, presence: true
  validates :contents, presence: true
end

手順②他のフォームでもエラーメッセージを表示させるときのことも考えて、パーシャルとして、別ファイルを作成する

Ruby
1
2
3
4
5
6
7
8
9
10
11
#_error_messages.html.erb
 
<% if model.errors.any? %> #errorが発生したときの条件分岐。modelはパーシャルで渡されたフォームのオブジェクトの変数。（詳細は後述）
    <div class = "alert alert-warning">
        <ul>
            <% model.errors.full_messages.each do |message| %>
                <li><%= message %></li>
            <% end %>
        </ul>
    </div>
<% end %>

model.errors.full_messagesでmodelというフォームのオブジェクトが持つ全てのエラーメッセージを配列で取得することができ、それをeach文で繰り返すことによって、エラーメッセージをリスト型（<li></li>）で取得。

あとは、これをエラーメッセージを入れたいフォームの箇所にrenderで呼び出せばOK！

Ruby
1
<%= render 'layouts/error_messages', model: f.object %>

第二引数のmodel: f.objectはパーシャルに対して変数を渡している。よって、modelという変数名で、f.object（フォームのオブジェクト）を渡している。そして、そのmodelという変数は、パーシャルの条件分岐のオブジェクトとして使う。

これだけでエラーメッセージは表示されるはずですが、デフォルトではエラーメッセージが英語表記になっているので、日本語表記に変換します。

手順③gemをインストール

Ruby
1
gem 'rails-i18n'

これでエラーメッセージは日本語に変換してくれるが、エラーメッセージで表示されるカラム名（この記事で言う、dateとcontents）は英語表記のカラム名のまま。
これも日本語にするためには、これらのカラム名を日本語表記にするために設定が必要。

手順④/config/localesにja.ymlを作成し、日本語表記にしたい変数名を設定する

Ruby
1
2
3
4
5
6
7
8
#ja.yml
 
ja:
    activerecord:
        attributes:
            daily: #モデル名
              date: 営業日　#変換後の日本語を記入
              contents: 日報内容 #変換後の日本語を記入

これで無事にエラーメッセージが表示される。

でも、これではまだ終われない。

手順⑤レイアウトを整える

Railsでは、エラーメッセージが表示される際に、エラーメッセージを含むフィールドは自動的に「<div class = “field_with_errors”></div>」というタグで囲まれてしまうため、もともとのHTMLからレイアウトが微妙にずれてしまう。それを防ぐためにconfig/application.rbに下記設定を追加する。

Ruby
1
config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }

これで、HTMLのズレは解消される。

しかし、まだ問題がある。例えば、日付のフォームに間違って日本語を入れてしまった場合。今のままだと「営業日を入力してください」というエラーメッセージしか表示されないので、エラーの原因が分からない。そこで、ユーザーが営業日に入力した内容の何がエラーで引っかかったのかを明示させるために、バリデーションにもうひと工夫加える。

手順⑥正規表現を使って、入力フォーマットにもバリデーションをかける

Ruby
1
2
3
4
5
class Daily < ApplicationRecord
     validates :contents, presence: true
     validates :date, presence: true,
               format: { with: /\A^[1-2]\d{3}-(0[1-9]|1[0-2])-[0-3][0-9]\z/, message: "は「20XX-XX-XX」のように記入し、「X」には数字を入れてください。(記入例：2019-01-01)" }
end

format: { with: 正規表現 }で入力フォーマットに正規表現でバリデーションをかけることができる。正規表現の正確性については一旦ここでは横に置いておく。正規表現についてはドットインストールでも講座があるので、それを見ると大まかな概要は把握できる。1時間程度なので、すぐ見れる。https://dotinstall.com/lessons/basic_regexp_v2

そして、第二引数の「message: 」で、エラー時に表示させたいメッセージを指定することができる。

 

上記の画像の営業日はデフォルトで当日の年月日を入れるように設定しているので、エラーを起こした入力内容は表記されていないが、エラーメッセージはちゃんと変化しており、正しい入力方法を明示することができている。

0
関連記事