Quantcast
Channel: hachi8833の記事一覧|TechRacho by BPS株式会社
Viewing all articles
Browse latest Browse all 1759

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

$
0
0

概要

元サイトの許諾を得て翻訳・公開いたします。

日本語タイトルは内容に即したものにしました。

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

一瞬でできる便利技です! 🚤💨

Railsはデフォルトと規約が優れていることで知られていますが、私がRailsアプリで常に無効にしている機能が1つあります。

それはActiveModelInstanceTagfield_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クラスを追加する(翻訳)

The post Railsフロントエンド: フォームの.field_with_errorsスタイルを無効にする方法(翻訳) first appeared on TechRacho.


Viewing all articles
Browse latest Browse all 1759

Trending Articles