バリデーションエラーメッセージをJavaScript使って表示させる

いつもはフォームのエラーメッセージは下記のようにJavaScriptを使わずに行っていた。

 

messages_controller.rb

class MessagesController < ApplicationController
〜略〜
def create
@message = Message.new(message_params)
if @message.save
redirect_to root_path
else
render :new
end
end
〜略〜
end

 

new.html.erb

<%= form_with(model: @message, local: true) do |f| %>
<% if @message.errors.any? %>
  <%= render 'errors', model: f.object %>
<% end %>
 〜略〜
<% end %>

 

_errors.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 %>

 

 

今回はJavaScriptを使ってエラー表示してみる。

必要なことは

①turbolinks を有効にする

②respond_toメソッドを使ってリクエストのフォーマットごとに処理を分ける

③local: true を消してリクエスト形式をJS形式に変える

④create.js.erb ファイルを作成し、要素を指定し、エラー表示の部分を埋め込む

⑤JS形式のときの部分テンプレートの読み込みは "j render" を使う

 

messages_controller.rb

class MessagesController < ApplicationController
 〜略〜
  def create
@message = Message.new(message_params)

respond_to do |format|
if @message.save
format.html { redirect_to root_path }
else
format.html { render :new }
format.js
end
end
end
〜略〜
end

 

new.html.erb

 

<%= form_with(model: @message ) do |f| %>
<div id="errors"></div>
〜略〜
<% end %>

 

create.js.erb

document.getElementById("errors").innerHTML = "<%= j render "shared/error_messages" %>"

 

_errors.html.erb

<div class="error-alert">
<ul>
<% @item.errors.full_messages.each do |message| %>
<li class='error-message'>
<%= message %>
</li>
<% end %>
</ul>
</div>

 

以上で問題なくバリデーションのエラーが表示された。

ちなみに参考にさせていただいたのはこちらのページ

https://pikawaka.com/rails/remote-true