【Rails】入力エラー時にフォームのビュー崩れが発生する時の対処法について

はじめに

某プログラミングスクールにて、フリマアプリのコピーサイトを作る時に、新規会員登録画面を担当することになりました。
そこで、入力エラーの動作確認をした時にビュー崩れが発生。
このビュー崩れを回避する方法を見つけたので記事にしてみます。

処方前

入力エラーがあると、お名前（全角）とお名前カナ（全角）の入力覧がギュッとしちゃいます。
これを解決します。

解決方法

config/application.rbに、以下の記述をしてあげれば解決です。
※記述後サーバーを再起動しないと反映されませんのでご注意ください！

config/application.rb

module sample
  class Application < Rails::Application
    # 〜中略　〜
    config.i18n.default_locale = :ja

    #今回追加した場所↓

    #フォーム入力内容に謝りがあった場合に自動生成されるfield_with_errorsクラスを防ぐために追記
    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }

    # 〜中略　〜
  end
end

解説

それでは、簡単に解説していきます。

なぜビューが崩れた？

エラーを起こしたビューを検証ツールで確認すると、身に覚えのないdiv要素が増えていました。

これ↓

ググってみると、railsは入力フォームにエラーがあった場合に<div class="field_with_errors">というものを挿入するような仕組みになっているようです。

なんでそんなことすんねん？Σ(　 Д )ﻌﻌﻌﻌ⊙ ⊙

どうやら、エラー該当箇所毎にエラーメッセージをカスタマイズできるようにするために挿入してくれているようです。
例えば、電話番号入力蘭の桁数がおかしかった時に、電話番号入力蘭の上部に「電話番号の入力が不正です」とか表示されていた方が親切ですね。
・・・うん。確かに。ごめんねRails。否定しちゃって。

field_with_errorsを生成しないためには

勝手にfield_with_errorsを生成しないようにする方法がありました。
以下の手順を踏めば解決です。

1.config/application.rbに↓を追記

config/application.rb

module sample
  class Application < Rails::Application
    # 〜中略〜
    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
    # 〜中略〜
  end
end

2.サーバーを再起動
　これをしないと反映してくれませんのでご注意を！

　最後に

一旦、これで意図しない表示崩れを回避できるようにはなりました！
ただ、このfield_error_procは使いこなせれば、エラーメッセージをカスタマイズできる優れものです。
なので、表示しないようにする。というよりも使いこなす。という形に持っていきたいですね。
使いこなす方法が分かり次第、記事を追加で投稿しようと思います。
（しばらくはやってこなそう）