個人アプリ作成中に発生した問題の概要と解決についてまとめます。
#はじめに(背景と発生した問題内容)
-背景:
Tweet機能を持たせたアプリを作成中、文字数制限をValidationで設定していたため、
Tweet時、文字数制限をオーバーしたときにValidationエラーメッセージを出そうとしていました。
その際に、form_tagを用いて以下の記述をしていました。
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">編集する</h1>
<%= form_tag("/posts/#{@post.id}/update") do %>
<div class="form">
<div class="form-body">
<% @post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= @post.content %></textarea>
<input type="submit" value="保存">
</div>
</div>
<% end %>
</div>
</div>
こちらの記述を実行し、文字数制限をオーバーすると、Validationエラーメッセージが出てきました。
記述に問題はなさそうです。そこで、最近学習したform_withを使用しようとしたところ、
以下の問題が発生します。
-問題:
form_withの記述に変更したところ、Validationエラーメッセージが出なくなってしまった。
記述内容は以下の通り。
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">編集する</h1>
<%= form_with url:"/posts/#{@post.id}/update" do |form|%>
<div class="form">
<div class="form-body">
<% @post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= @post.content %></textarea>
<input type="submit" value="保存">
</div>
</div>
<% end %>
</div>
</div>
Validationエラーメッセージが出ないこと以外は正常に動いていましたが、やりたいことができてません。。。
そこで、色々と調べた結果、以下のことがわかりました。
#解決方法
まず結論から、今回の問題はform_withの記載中にlocal:trueと記載する必要がありました!
#以下のようにlocal:trueと記載します!
<%= form_with url:"/posts/#{@post.id}/update",local:true do |form|%>
#他の箇所の変更は必要ないですが、念のため全体は以下のようになります。
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">編集する</h1>
<%= form_with url:"/posts/#{@post.id}/update",local:true do |form|%>
<div class="form">
<div class="form-body">
<% @post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= @post.content %></textarea>
<input type="submit" value="保存">
</div>
</div>
<% end %>
</div>
</div>
上記記載に変更したところ、無事Validationエラーメッセージが出てきました!これで問題解決です!
以下にて今回の問題発生原因についても記載します!
#原因
今回の問題の原因はform_tag/form_forとform_withの仕様の違いが原因でした。
○form_tag/form_for:
-localは、基本的にtrue設定で記載の必要なし。
-remote(Ajax)は、記載の必要あり。
○form_with:
-localは、記載の必要あり。
-remote(Ajax)は、基本的にtrue設定で記載の必要なし。
今回はAjaxではなく、localでの処理であったため、form_with使用時はlocal:trueの記載が必要だったことになります!
以上となります。最後までご覧いただき、ありがとうございました!
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします!
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。
#参照
Rails 5.1のform_withでViewにvalidationエラー表示
https://qiita.com/k_senbei/items/a361171f653edcd888ad
【Rails】form_with (local: true)について
https://qiita.com/hayulu/items/5bf26656d7433d406ede