【Ruby on Rails7】バリデーションエラー時のCSSを変更

この記事では、Ruby on Rails7のバリデーションエラー時のCSSを変更するための手順を紹介いたします。

目次

バリデーションエラー時に赤くならない?

チュートリアル等ではバリデーションエラーで、エラーが赤く表示されますが…

あれ?
赤くならないな。
なんでだろう…?

よく見かける、バリデーションエラーでレイアウトが崩れた!もないね。

原因はBootstrapベースのデザインテンプレートでした

なるほど、気が利いたデザインテンプレートはRailsのこのあたりの対応もされているんですね。

新しいバージョンにはfield_with_errorsはないのかしら?と勘違いしていましたが、ちゃんと存在していました。

ただ、エラーの際にINPUTタグは赤く囲いたいなあ…と。

変更手順

私はscssを使用していますので、それを前提に。
app/assets/stylesheets/application.scssに以下を追記します。

/* バリデーションエラー時に赤で囲む */
#error_explanation {
  @extend .alert;
  @extend .alert-danger;
}

.field_with_errors {
  display: inline;
}

div.field_with_errors input, div.field_with_errors textarea {
  outline: none;
  border: 2px solid red;
}

#error_explanationはエラーメッセージの方ですね。こちらを赤(ピンク?)で囲みます。
.field_with_errorsはレイアウト崩れ対策です。私の方はすでに対策済みのデザインテンプレートを入れていますので、書いても書かなくても変わりませんが…
div.field_with_errors inputdiv.field_with_errors textareaについては、赤く囲うようにします。SELECTやラジオボタンチェックボックスについての記述がないのは、私がそのあたりの項目でバリデーションをかけていないから。必要な都度追加すれば良いと思っています。

is-invalidについて

Bootstrapではいつからかは忘れましたがis-invalidというバリデーションエラー用のclassが存在しています。

https://getbootstrap.jp/docs/5.3/forms/validation/

なので、is-invalid@extendしても似たようなことができるかもしれません。

これをclassに挿入すると、INPUTタグの右端に「!」が表示されるのですが、これ、サイズがちっちゃいと、入力内容が切れてしまったりするので、私は使わないようにしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次