Style Error States

Let’s discuss style error states in our app.

Improving error messaging in Rails views

There are two things to do here. First, we want a top-level red box telling the user that there are errors. We then want each field to indicate the specific errors that happened.

The top-level error code looks like the following:

Press + to interact
<%# app/views/widgets/new.html.erb %>
→ <% if @widget.errors.present? %>
→ <aside
→ class="pa3 tc ba br2 b--dark-red dark-red
→ bg-washed-red b mb3">
→ The data you provided is not valid.
→ </aside>
→ <% end %>
...