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
でラップされずに、そのまま返されるようになります。
関連記事
The post Railsフロントエンド: フォームの.field_with_errorsスタイルを無効にする方法(翻訳) first appeared on TechRacho.
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。