Railsフロントエンド: フォームの.field_with_errorsスタイルを無効にする方法（翻訳）
一瞬でできる便利技です！ 🚤💨
Railsはデフォルトと規約が優れていることで知られていますが、私がRailsアプリで常に無効にしている機能が1つあります。
それはActiveModelInstanceTagのfield_with_errorsです。
フォームのフィールドでバリデーションエラーが発生すると、このメソッドはそのエラーをdiv.field_with_errorsでラップします。これで、CSSで以下のようなスタイルを記述できます。
.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
background-color: #ffcccc;
}
しかし余分なdiv要素が追加されると、（慎重に）作成したHTMLのフローが乱されてしまい、レイアウトが崩れてしまいがちです。
さらに重要なのは、私はフォームのバリデーションエラーをハイライト表示する専用のコンポーネントを作成するのが好みだということです。こうすることで、フィールドやラベルのinputに思い通りのスタイルを設定できるからです。
ありがたいことに、field_with_errorsスタイル付きのdivは簡単に無効にできます。
イニシャライザを作成して以下のコードを追加します。
# config/initializers/field_with_errors.rb
ActionView::Base.field_error_proc = proc do |html_tag, instance|
html_tag.html_safe
end
これは、元のHTMLを変更せず、安全にHTMLレンダリング可能な文字列を返すprocを設定することで、Railsのフォームでフィールドのエラー処理を変更します。
フォームの無効なフィールドは、field_with_errorsスタイル付きのdivでラップされずに、そのまま返されるようになります。🏆
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。