エラーメッセージを表示させる

#はじめに

投稿するボタンをクリックした後間違えがあった場合、エラーメッセージが表示されればユーザーは何を間違えたかが一目で分かると思います。

今回はそのエラーメッセージを表示させる記述をしたいと思います。

#やる事

• モデルにバリデーションをかける

• エラーメッセージを受け取るファイルを作成する

• エラーメッセージを表示させるようにビューファイルに記述する

大まかにこの3点です。

#モデルにバリデーションをかける

フリマアプリを作成中だとして、フリマに出品する際に商品名や画像がないと何の商品かわからないですよね。

なので空欄では出品できないようにバリデーションを定義します。

item.rb

class Item < ApplicationRecord
 validates :name, presence: true
 validates :image, presence: true
end

with_options presence: true doでまとめる事ができますが省略します。

これで空の場合は投稿できないようにしました。

#エラーメッセージを受け取るファイルを作成する

ファイルを作成する場所は今回はviews>shared>_error_messages,html.erb
に作成します。

<% if model.errors.any? %>
 <div class="error-alert">
  <ul>
    <% model.errors.full_messages.each do |message| %>
     <li class='error-message'><%= message %></li>
    <% end %>
  </ul>
 </div>
<% end %>

この記述の中身を解説します。

<% if model.errors.any? %>

<% end %>

any?メソッドで1つでもエラーがあった場合、条件分岐で下の内容が読み込まれます。

公式リファレンス

今回はitemモデルの中にエラーはありますかとなります。

ちなみにerrorsは今起きているエラーをエラーメッセージとして受け取ることができます。

<ul>
  <% model.errors.full_messages.each do |message| %>
    <li class='error-message'><%= message %></li>
  <% end %>
</ul>

model.errors.full_messages.each do |message|の記述で全てのエラーメッセージをmessageに格納します。

errors.full_messagesとは詳細なエラーメッセージを確認することができます。
今回はitemモデルのエラーメッセージです。

例としてimageが空だとどんなエラーメッセージが出るのか検証します。
valid?メソッドを使用します。

item.image = nil #写真が空ですよ
item.valid? #検証　
=> false
item.errors.full_messages
=>["Image can't be blank"] #エラーメッセージ

このように出てくる詳細なエラーメッセージをmessageに格納します。

そして<ul><li>タグで箇条書きにして表紙させます。

#エラーメッセージを表示させるようにビューファイルに記述する

エラーメッセージのファイルをビューファイルに貼り付けます。

<%= form_with model: @item, local: true do |f| %> 
  <%= render 'shared/error_messages', model: f.object %>
<% end %>

#参考

Pikawaka