LoginSignup
3
2

More than 3 years have passed since last update.

【Rails】エラーメッセージでフォームのレイアウトが崩れる

Last updated at Posted at 2021-03-10

現象:バリデーションエラー後の画面で入力フォームが崩れる

PFへこのようなお問い合わせフォームを設置しました。

image.png

入力する名前とメッセージへそれぞれ次のようにバリデーションを記述

app/models/contact.rb
class Contact < ApplicationRecord
  validates :name, presence: true
  validates :message, presence: true, length: {maximum: 200, minimum: 2}
end

バリデーションが効いているかどうか、いざお試し⋯!!

image.png

入力フォームが崩れてしまいました。

原因: 自動挿入される「field_with_errors」

エラー発生後のhtmlを検証ツールで確認すると、inputタグ(名前入力フォーム)とtextareaタグ(メッセージ入力フォーム)を囲むように新たなdivタグが出現していることがわかりました。

image.png

出現したdivタグはclass="field_with_errors"とクラスがつけられています。

<div class="field_with_errors">
  入力フォーム
</div>

調べてみると、エラーが発生した際、railsは自動で、エラーメッセージを含むフィールドをfield_with_errorsクラスを持つdivタグで囲んでくれるのだそうです。
それを利用することで、field_with_errorsを指定してCSSを調整することで"エラーが発生しているフォームを赤くして目立たせる"のようなことができるようになるのか!

Railsでは、エラーメッセージを含むフィールドは自動的にfield_with_errorsクラスを持つdivタグで囲まれます。これを利用して、エラーメッセージをもっと目立たせるようにcssルールを定義しても構いません。
Rails をはじめよう / 5.10 バリデーションの追加 – Rails ガイド より

今回はRailsが自動生成してくれたdivタグに囲まれてしまったことでフォームのレイアウトが崩れてしまっていました。

解決策: 2通り 

参考にした記事によると解決方法は2通りあるようです。

  1. 自動挿入されないようにする
  2. 挿入されたクラスのスタイルを編集する

① 自動挿入されないようにする

Railsが自動挿入しないようにする設定はconfig/application.rbに次のように記述することでできるよう。
(わたしは今回こちらの方法で試していないので、これで上手く行かなかったらすみません⋯!)

config/application.rb
module SampleApp
  class Application &lt; Rails::Application
          # 他省略..
    config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
  end
end

この方法はRailsが提供してくれている機能を自ら使用できなくするものです。
他のページへ影響する懸念があったため私は2つめの方法を採用しました。

② 追加されたクラスにCSSでスタイルを当てる

新たに追加されたdivタグへレイアウトが崩れないようなCSSを適応させてあげることで解消できました。

.field_with_errors {
  display: contents;
}

私の場合はdisplay: contents;を追加してあげることで治りました。

image.png

もし、これで治らなくても検出ツールでいろいろ当ててみてレイアウトが崩れない方法を探してみてください。

学んだこと

「Rails側が自動でやってくれる」
こんなに便利なことはないですね。いたれりつくせり。

しかし、便利な半面、「Railsはどんなときにどんなことをやってくれるのか。」そして、「その裏ではどんなことが起こっているのか。」
をちゃんと知っておかないと予想外のところではまってしまうと感じました。

学習するときは"便利"に甘えず、仕組みまで理解するよう意識したいと思います。

参考にした記事

次の記事により解決までたどり着けました。
https://yukimasablog.com/rails-field-with-errors

公式でfield_with_errorsについて記述があるページです。(ほんの少し)
https://railsguides.jp/getting_started.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0

ここまでお読みいただきありがとうございました!

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2