_error_messagesによって表示されたメッセージを分かりやすく色で囲む

はじめに

このように投稿に失敗した時にエラーメッセージが出るようにしました。

しかしデフォルトで黒文字で表示されるので強調するように色で囲んだら良いのではないかと思ったので囲んで見ることにしました。

前提

エラーメッセージが表示される事

<% if model.errors.any? %>
  <div class="error-alert">
    <ul>
      <% model.errors.full_messages.each do |message| %>
        <li class='error-message'><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

<div class="form_box">
    <%= form_with model: @review, local: true do |f| %>
        <%= render 'shared/error_messages', model: f.object %> 
    <% end %> 
</div>

試した事

bootstrapでアラート系の記述を入れ込みました。

<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

失敗例

はじめは失敗しました。

<div class="alert alert-danger" role="alert">
  <%= render 'shared/error_messages', model: f.object %> 
</div>

new.html.erbのビュー内の記述に入れ込むと・・・

投稿に失敗する前からちょい見え・・・笑笑

成功！

記述する箇所を変えて,error_message記述しました。

<% if model.errors.any? %>
  <div class="alert-danger"> クラス名変更
    <ul>
      <% model.errors.full_messages.each do |message| %>
        <li class='error-message'><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

このように赤で囲む事ができました。