バリデーションエラーの色付け

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。
バリデーションを設定し、エラーになった際に色付けをしたい

前提

初心者です。
簡単な投稿アプリケーションの作成をしています。
バリデーションを設定しエラーになった際に色を付けて
表示したいのですが、エラーの時だけでなく常に色が付いて
しまっています。

発生している問題・エラーメッセージ

元々テキストを書くところには自動的に
"field_with_errors"が生成されるのですが
その上のタイトルのところにはCSSが効かないので
設定したい

<%= form_with model: @book do |f| %>
<div class="text-field">
  <div class="field_with_errors">
  <div>Title</div>
  </div>
  <%= f.text_field :title %>
</div>

<div class="text-field">
  <div class="field_with_errors">
  <div>Body</div>
  </div>
  <%= f.text_area :body %>
</div>

<div class="text-submit">
  <%= f.submit 'Create Book' %>
</div>
<% end %>

.field_with_errors {
  display: table;
  background-color: red;
  padding: 2px;
}

試したこと

"field_with_errors"を消したり場所を変えてみたり…
見本のデベロッパーツールと見比べてみたり…

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

それはエラーの有無に関わらず常に <div class="field_with_errors"></div> で囲っているからです。

<% klass = @book.errors.messages[:title].present?  ? "field_with_errors" : "" %>
<div class="<%= klass %>">
...
</div>

とでもしてみてください

Comments

[kuuumi]

常に設定されるようになっていたからだったんですね。
また一つ勉強させていただきました。
教えていただいた通りに記入したら無事できました。
ありがとうございました。