Add useful error feedback to forms

app/assets/stylesheets/colors.css

@@ -10,4 +10,6 @@
 
   --notice-bg-color: #5cb85c;
   --notice-text-color: #fff;
+
+  --invalid-alert: #d00;
 }

app/assets/stylesheets/forms.css

@@ -19,4 +19,16 @@ form {
   input[type="submit"] {
     grid-column: 1/3;
   }
+
+  .field_with_errors {
+    display: contents;
+    border: 1px solid var(--invalid-alert);
+    color: var(--invalid-alert);
+  }
+
+  .invalid-feedback {
+    grid-column: 2;
+    color: var(--invalid-alert);
+    font-size: .8em;
+  }
 }

app/assets/stylesheets/layout.css

@@ -21,6 +21,10 @@ aside.flash {
   border-radius: var(--border-radius);
 }
 
+aside.alert {
+  background-color: var(--invalid-alert);
+}
+
 section.inset {
   width: 70%;
   max-width: 60em;

app/helpers/application_helper.rb

@@ -1,4 +1,11 @@
 # frozen_string_literal: true
 
 module ApplicationHelper
+  def display_form_errors(object, attr)
+    return unless object.errors.include?(attr)
+
+    content_tag(:div, class: "invalid-feedback") do
+      object.errors.full_messages_for(attr).join(". ")
+    end
+  end
 end

app/views/admin/game_systems/_form.html.erb

@@ -3,6 +3,7 @@
 <%= form_with model: @game_system, url: do |f| %>
   <%= f.label :name %>
   <%= f.text_field :name, required: true %>
+  <%= display_form_errors(@game_system, :name) %>
 
   <%= f.submit button_text %>
 <% end %>

app/views/tables/_form.html.erb

@@ -2,10 +2,12 @@
 
 <%= form_with model: @table do |f| %>
   <%= f.label :name %>
-  <%= f.text_field :name, required: true %>
+  <%= f.text_field :name%>
+  <%= display_form_errors(@table, :name) %>
 
   <%= f.label :game_system_id %>
-  <%= f.collection_select :game_system_id, GameSystem.all, :id, :name, required: true %>
+  <%= f.collection_select :game_system_id, GameSystem.all, :id, :name, required: true, include_blank: " " %>
+  <%= display_form_errors(@table, :game_system) %>
 
   <%= f.submit button_text %>
 <% end %>

app/views/users/_form.html.erb

@@ -4,21 +4,27 @@
   <%= form_with model: user do |f| %>
     <%= f.label :username %>
     <%= f.text_field :username, required: true %>
+    <%= display_form_errors(user, :username) %>
 
     <%= f.label :first_name %>
     <%= f.text_field :first_name %>
+    <%= display_form_errors(user, :first_name) %>
 
     <%= f.label :last_name %>
     <%= f.text_field :last_name %>
+    <%= display_form_errors(user, :last_name) %>
 
     <%= f.label :email %>
     <%= f.text_field :email, required: true %>
+    <%= display_form_errors(user, :email) %>
 
     <%= f.label :password %>
     <%= f.password_field :password, required: true %>
+    <%= display_form_errors(user, :password) %>
 
     <%= f.label :password_confirmation %>
     <%= f.password_field :password_confirmation, required: true %>
+    <%= display_form_errors(user, :password_confirmation) %>
 
     <%= f.submit button_text %>
   <% end %>

todo.md

@@ -1,4 +1,3 @@
-- Ensure form errors/flash show correctly
 - Add players to tables
   - notifications
 - Add characters to users/tables