Rails5.1 + Bootstrap4でfield_with_errors

field_with_errorsクラスとは？

Railsのバリデーションでエラーになった箇所に付与されるクラスの事です。

Bootstrap3

• field_with_errorsクラスに対して Bootstrap3の .has-error をextendすることで入力欄が赤枠で表示されていた。

application.scss

.field_with_errors {
  @extend .has-error;
}

Bootstrap4

• .has-error が無くなっているのでextendできない。
• 代わりに input タグに対して .is-invalid をextendする。

application.scss

.field_with_errors {
  input {
    @extend .is-invalid;
  }
}