このチャプターの目次
エラーメッセージのデザイン
今回は小さな変更ですが、バリデーションによるエラーメッセージの見た目を整えていきましょう。
現状の確認
開発用サーバを bin/dev で起動してから、何も入力せずにユーザー登録してみましょう。
バリデーションによるエラーメッセージが表示されますね。
これでもエラーメッセージとは機能しますが、もう少し目立つ形に変更します。
デザイン調整
devise でバリデーションのエラーメッセージを表示する部分テンプレートは app/views/devise/shared/_error_messages.html.erb です。
こちらの現状を確認します。
(変更前): app/views/devise/shared/_error_messages.html.erb
<% if resource.errors.any? %>
<div id="error_explanation">
<h2>
<%= I18n.t("errors.messages.not_saved",
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
%>
</h2>
<ul>
<% resource.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
devise コマンドで自動生成されたものですが、特にスタイルは適用されていませんね。
このテンプレートを TailwindCSS で装飾し、以下のように変更します。
(変更後): app/views/devise/shared/_error_messages.html.erb
<% if resource.errors.any? %>
<div id="error_explanation">
<h2 class="text-lg mb-3 font-medium text-gray-700">
<%= I18n.t("errors.messages.not_saved",
count: resource.errors.count,
resource: resource.class.model_name.human.downcase)
%>
</h2>
<ul>
<% resource.errors.full_messages.each do |message| %>
<p class="leading-5 mb-2 text-red-500"><%= message %></p>
<% end %>
</ul>
</div>
<% end %>
変更後の確認
では、再度エラーメッセージを表示させてみましょう。
分かりやすいところでいえば、エラーメッセージが赤くなっていることが分かるかと思います。
変更をコミット
今回の変更をコミットしておきましょう。
$ git add .
$ git commit -m "バリデーションエラーメッセージのデザイン調整"
$ git push