【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 inputとdiv.field_with_errors textareaについては、赤く囲うようにします。SELECTやラジオボタンチェックボックスについての記述がないのは、私がそのあたりの項目でバリデーションをかけていないから。必要な都度追加すれば良いと思っています。

is-invalidについて

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

getbootstrap.jp

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

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