Railsフロントエンド: フォームの.field_with_errorsスタイルを無効にする方法（翻訳）

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でラップされずに、そのまま返されるようになります。🏆

関連記事

Rails: ビューやコンポーネントに条件付きでCSSクラスを追加する（翻訳）