Rails6_バリデーションにかかったときのエラーメッセージを表示できない。

Question

前提・実現したいこと

バリデーションに引っかかった時にエラーメッセージを表示したいのですが、表示されません。

参考記事
バリデーションの実装
https://qiita.com/nakanishi03/items/d1be27c74c98855423ab
デバッグ方法
https://techtechmedia.com/error-messages-validation-rails/

models/event.rb
バリデーションは、下記を設定しています。
未入力で「Create Event」をクリックすると、全5項目がバリデーションエラーを起こします。

class Event < ApplicationRecord
  validates :name, length: { maximum: 50 }, presence: true
  validates :place, length: { maximum: 100 }, presence: true
  validates :content, length: { maximum: 2000 }, presence: true
  validates :start_at, presence: true
  validates :end_at, presence: true
  # カスタムバリデーション
  # https://qiita.com/yutas-8/items/8b6b4b6ce876ad2cf26b
  validate :start_at_should_be_before_end_at

  private

  # 開始時間は終了時間よりも前の時間
  def start_at_should_be_before_end_at
    return unless start_at && end_at
    
    if start_at >= end_at
      errors.add(:start_at, "は終了時間よりも前に設定して下さい")
    end
  end
end

controllers/events_controller.rb
バリデーションに引っかかり保存できなかったときは、views/events/new.html.slimをレンダリングします。

class EventsController < ApplicationController
  def new 
    @event = current_user.created_events.build
  end

  def create
    @event = current_user.created_events.build(event_params)
    
    if @event.save
      redirect_to @event, notice: "作成しました"
    else
      render :new
    end
  end

  private
  
  def event_params
    params.require(:event).permit(
      :name, :place, :content, :start_at, :end_at
    )
  end
end

views/events/new.html.slim
バリデーションエラーを起こした時は、= render "shared/errors", model: f.objectでエラーメッセージを差し込みます。

- now = Time.zone.now 

h1.mt-2 イベント作成

= form_with(model: @event, class: "form-horizontal") do |f|
  = render "shared/errors", model: f.object
  .form-group 
    = f.label :name
    = f.text_field :name, class: "form-control"
  .form-group 
    = f.label :place
    = f.text_field :place, class: "form-control"
  .form-group 
    = f.label :start_at
    div
      = f.datetime_select :start_at, start_year: now.year, end_year: now.year + 1
  .form-group 
    = f.label :end_at
    div
      = f.datetime_select :end_at, start_year: now.year, end_year: now.year + 1
  .form-group 
    = f.label :content
    = f.text_area :content, class: "form-control", row: 10
  = f.submit class: "btn btn-primary"

- if model.errors.any?で@event.errors.any?がtrueの時だけ表示するようにしています。
views/shared/_errors.html.slim

- if model.errors.any?
  .alert.alert-danger
    ul.mb-0
      - model.errors.full_messages.each do |message|
        li = message

自分で調べたことや試したこと

最低限以下のことはチェックしましたが、解決に至りませんでした。

• _errors.html.slimのレンダリングは正しくできているか？

　- if model.errors.any?をコメントアウトして、適当なテキストを追加するとブラウザで表示できることを確認できたため、レンダリングすることはできている。

• バリデーションは動作している？

　binding.pryでデバッグしてみましたが、正しく動作している。デバッグ詳細は下記。Nameなど全て未入力です。

     6: def create
     7:   @event = current_user.created_events.build(event_params)
     8: 
     9:   if @event.save
    10:     redirect_to @event, notice: "作成しました"
    11:   else
    12:     
 => 13:     binding.pry
    14:     
    15:     render :new
    16:   end
    17: end

[1] pry(#<EventsController>)> @event.errors.any?
=> true
[2] pry(#<EventsController>)> @event.errors.full_messages
=> ["Name can't be blank", "Place can't be blank", "Content can't be blank", "Start at は終了時間よりも前に設定して下さい"]

• slim記法が間違っている？

下記記事を参考にチェックしましたが、問題ない。
https://pikawaka.com/rails/slim

現状完全に手詰まり状態になってしまっているため、少しでも気になる点があればご教授いただけるとありがたいです。
よろしくお願いいたします。

使っているツールのバージョンなど補足情報

Rails 6.0.3
ruby 2.6.5
slim-rails (3.3.0)

補足ですが、こちらはパーフェクト Ruby on Railsの演習の一部です。
書籍ではSJRで実装されていますが、その方法でもうまくいかなかった為、以前実装したことのある今回の手法を試しています。（今回もうまくいっていないのですが。。）

Answer 1

【案１】
form_with はAjaxを前提に動作するため、javascript で ajax:success を拾ってエラーメッセージを描画する必要があります。

Rails ガイドの

• Rails で JavaScript を利用する > 3 組み込みヘルパー > 3.1 remote要素
• Rails で JavaScript を利用する > 4 サーバー側で考慮すべき点 > 4.1 シンプルな例

辺りを参考にするとイイ感じになると思います。

https://railsguides.jp/working_with_javascript_in_rails.html

--

【案２】
ぶっちゃけ案１は面倒くさいので、特にこだわりが無い場合は :local オプションを使ってAjaxをoffにしちゃうと楽です。1行だけの変更で済みます。

- = form_with(model: @event, class: "form-horizontal") do |f|
+ = form_with(model: @event, local: true, class: "form-horizontal") do |f|

Comments

[shisoshiso]

ご回答・具体的な案を頂きありがとうございます。解決しました！
教えて頂いた2つのやり方で実装することができました。また参考サイトもありがとうございます。非常に勉強になりました。今後はHTTP通信がどのように行われているのか、意識して実装することを心がけたいと思います。

以下、実装したコードです。（同じような悩みを抱える方へ向けて）
案1　Ajaxリクエストに対してrespond_toでエラーメッセージを作って返すやり方。
```ruby
# events/new.html.slim
# renderの代わりにJavaScriptを差し込むためのid=errorsを追加
= form_with(model: @event, class: "form-horizontal") do |f|
#errors
.form-group
= f.label :name
略

# events_controller.rb
# Ajaxリクエストにformat.jsで対応
def create
@event = current_user.created_events.build(event_params)

respond_to do |format|
if @event.save
format.html { redirect_to @event }
else
format.js
end
end
end

# events/create.js.erb
# format.jsに対応するビューファイル。これを元にJavaScriptが生成され、クライアントに送信された後に実行
var errors = document.querySelector("#errors")
# views/application/_errors.html.slimに書いたHTMLを利用
errors.insertAdjacentHTML("beforeend", "<%= j render("errors", errors: @event.errors) %>");
```

案2　Ajax無し。こちらのやり方は本当に楽ですね。
```ruby
= form_with(model: @event, local: true, class: "form-horizontal") do |f|
```