フォーム入力時にバリデーションエラーが発生していることを視覚的にわかりやすくするためにエラーメッセージを個別表示させていきます。

エラーメッセージを準備する

まず最初にエラーメッセージ用のテンプレートを作成します。

Sayo-MacBook-Pro:emoji_diary SAYO$ touch app/views/shared/_error_messages.html.erb

作成したエラーメッセージのテンプレートに追記していきます。

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

errors.full_messagesは全てのエラーメッセージを配列で取得します。

エラーメッセージを表示したフォームの上に、このrender文を挿入します。

<%= render 'shared/error_messages', object: f.object %>

日記の新規作成、編集フォームを部分テンプレートにする

日記投稿のフォーム部分は内容が同じなのでテンプレートファイルとして作成していこうと思います。まず最初に部分テンプレートのファイルを作成しました。

Sayo-MacBook-Pro:emoji_diary SAYO$ touch app/views/diaries/_form.html.erb

作成したファイルにフォーム部分を入力していきます。この部分テンプレートでは色々なファイルで使用するので、インスタンス変数は使わないようにします。※edit.html.erbファイルでは、<%= form_with model: @diary, local: true do |f| %>のように、form_withでインスタンス変数を使っていました。

<%= form_with model: diary, local: true do |f| %>

  <div class="form-group">
    <%= f.label :start_time %></br>
    <%= f.date_select :start_time, class: 'form-control' %>
  </div>
  
  <div class="form-group">
    <%= f.label :feeling %>
    <%= f.text_field :feeling, class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_field :body, class: 'form-control' %>
  </div>

  <div class="submit">
    <%= f.submit class: "btn btn-primary" %>
  </div>

<% end %>

(diaries/edit.html.erb、new.html.erb)

<div class="container">
  <div class="row">
    <div class="col-lg-8 offset-lg-2">
      <%= render 'form', { diary: @diary } %>
    </div>
  </div>
</div>

ユーザー新規登録のページにエラーメッセージを挿入します。