Style Error States
Let’s discuss style error states in our app.
We'll cover the following...
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 %>
This might feel like a reusable component or that the big mess of classes should be extracted to some sort of error-dialog class. If we need this exact markup again, we can extract ...