Search⌘ K
Home
Courses
Creating Long-Lived Web Apps with Ruby on Rails

Style Error States

Explore how to effectively style error states in Ruby on Rails views by creating reusable components that highlight top-level and field-specific errors. Learn to enhance user experience with clear error messages without overcomplicating your code, focusing on semantic HTML and manageable styling techniques.

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:

Ruby
<%# 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 ...