ページ最下部に設置したフォームでエラー処理を行う方法

2019年12月9日 23:03

Rails

当ポートフォリオサイトのコンタクトフォームはトップページの最下部に設置しています。
コンタクトフォームをページ最下部に設置することでひとつ問題点が出てきます。それは、エラー発生時（未入力項目がある等）にページ最下部にあるコンタクトフォームに遷移できないこと。

今回のケースにおけるrenderメソッドとredirect_toメソッドそれぞれの問題点と、最終的に行き着いた解決策を記載します。

renderの問題点

一般的にコンタクトフォームの送信処理は以下のように記述するかと思います。

  def sending
    @contact = Contact.new(contact_params)
    if @contact.valid?
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to contact_done_path
    else
      render 'statics/index'
    end
  end

もしバリデーションに失敗した場合、renderメソッドを使って'statics/index'（トップページのこと）に遷移します。
バリデーション失敗時にrenderメソッドを使っている理由は、renderメソッドはコントローラーを介さずに直接ページを表示できるからです。コントローラーを介さずに直接ページを表示することで、遷移先のページで@contact変数が使えるようになります。
遷移先のページでは、以下のように@contact.errorsがあればエラーメッセージを表示するようになっています。

<% if @contact.errors.any? %>
  <ul class="text-danger">
    <% @contact.errors.full_messages do |message| %>
      <li><%= message %></li>
    <% end %>
  </ul>
<% end %>

では何が問題なのかというと、renderメソッドにはアンカー機能がないため、必ずページ最上部に遷移してしまうのです。コンタクトフォームはページ最下部に設置しているので、アンカーでページ最下部にあるコンタクトフォームを表示させたいのに…
ちなみに@contact変数はしっかり受け取っているので、ページ最下部までスクロールするとちゃんとエラーメッセージは表示されています。

redirect_toの問題点

「じゃあアンカー機能のあるredirect_toを使えばいいのでは？」と思うことでしょう。しかし、redirect_toには別の問題点があります。
redirect_toでアンカー機能を使うときは以下のように記述します。

redirect_to root_path(anchor: 'home')

さて、redirect_toの問題点とは、redirect_toはコントローラーを介すため@contact変数が遷移先のページで使えなくなるということです。
今回の場合、root_pathはStaticsコントローラーのindexメソッドを呼び出します。

class StaticsController < ApplicationController
  def index
    ...
    @contact = Contact.new
  end
end

indexメソッド内の処理でエラーメッセージを含んだ@contactが上書きされてしまうのではないかと思っています（間違ってたらご指摘ください）。

解決策

ではどうすればいいのか？
かなり強引な方法かと思いますが、一応思い通りの動きになったので良しとしています。

まず、Contactsコントローラーのsendingメソッドは以下のとおりです。

  def sending
    ...
    @contact = Contact.new(contact_params)
    if @contact.valid?
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to contact_done_path
    else
      flash[:params] = @contact
      flash[:errors] = @contact.errors.full_messages
      redirect_to root_path(anchor: 'contact')
    end
  end

エラーを含んだ@contact変数をflash変数に入れ直しています。これによりredirect_toで呼び出されたコントローラーのメソッド内でエラーが取り出せるようになります。
※flash変数の本来の使い方ではないことはわかっています。

次に、Staticsコントローラーのindexメソッドです。

  def index
    ...
    @contact = Contact.new

    unless flash[:params].nil?
      @contact.name = flash[:params]["name"]
      @contact.email = flash[:params]["email"]
      @contact.content = flash[:params]["content"]
      @errors = flash[:errors]
    end
  end

flash変数がnilでなければその内容を@contact変数に入れ直しています。これによりエラーを含んだ@contact変数が再び使えるようになります。

一応思い通りの動きになりましたが、果たしてflash変数を使う必要性があるのかどうかとか、それぞれのコントローラーで異なる変数名にすればflash変数を使わずとも参照できるのではないかなど、もう少し検証する余地がありそうです。

【完全無料でSSL化】RailsアプリをNginxで動かす！Nginxのインストール方法から最低限しておきたい設定まで

「HTTP (TCP/80)／HTTPS (TCP/443)」「サブドメイン（www）あり／なし」の違いによるアクセスを一本化