いつもはフォームのエラーメッセージは下記のように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>
以上で問題なくバリデーションのエラーが表示された。
ちなみに参考にさせていただいたのはこちらのページ