Display resource error messages beside form

app/assets/stylesheets/application.css

@@ -168,9 +168,20 @@ form tr td:first-child {
 form label.required {
   font-weight: bold;
 }
-form label.error {
+form label.error,
+form td.error::after {
   color: #ff1f5b;
 }
+form td.error {
+  display: -webkit-box;
+}
+form td.error::after {
+  content: attr(data-content);
+  font-size: 0.9rem;
+  margin-left: 1rem;
+  padding: 0.25rem 0;
+  position: absolute;
+}
 form em {
   color: #707070;
   font-size: 0.75rem;

app/helpers/application_helper.rb

@@ -5,7 +5,10 @@ module ApplicationHelper
         def #{selector}(method, options = {})
           @template.content_tag :tr do
             @template.content_tag(:td, label_for(method, options)) +
-            @template.content_tag(:td, super)
+            @template.content_tag(:td, super,
+              @object&.errors[method].present? ?
+                {class: "error", data: {content: @object&.errors.delete(method).join(" and ")}} :
+                {})
           end
         end
       RUBY_EVAL
@@ -30,7 +33,9 @@ module ApplicationHelper
     end
 
     def table_form_for(&block)
-      @template.content_tag(:table) { yield(self) }
+      @template.content_tag(:table) { yield(self) } +
+      # NOTE: display leftover error messages (there shouldn't be any)
+      @template.content_tag(:div, @object&.errors.full_messages.join(@template.tag :br))
     end
   end
 

app/views/users/confirmations/new.html.erb

@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_confirmation_path, html: { method: :post } do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email",
     value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
 

app/views/users/passwords/edit.html.erb

@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_password_path, html: { method: :put } do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.hidden_field :reset_password_token, label: false %>
 
   <%= f.password_field :password, label: t('.new_password'),

app/views/users/passwords/new.html.erb

@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_password_path, html: { method: :post } do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
 
   <%= f.submit t(:recover_password) %>

app/views/users/registrations/new.html.erb

@@ -1,6 +1,4 @@
 <%= tabular_form_for resource, url: user_registration_path do |f| %>
-  <%= render "users/shared/error_messages", resource: resource %>
-
   <%= f.email_field :email, required: true, size: 30, autofocus: true, autocomplete: "email" %>
   <%= f.password_field :password, required: true, size: 30, minlength: @minimum_password_length,
     autocomplete: "new-password",

app/views/users/shared/_error_messages.html.erb

@@ -1,15 +0,0 @@
-<% if resource.errors.any? %>
-  <div id="error_explanation" data-turbo-cache="false">
-    <h2>
-      <%= I18n.t("errors.messages.not_saved",
-                 count: resource.errors.count,
-                 resource: resource.class.model_name.human.downcase)
-       %>
-    </h2>
-    <ul>
-      <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
-      <% end %>
-    </ul>
-  </div>
-<% end %>

config/environment.rb

@@ -3,3 +3,6 @@ require_relative "application"
 
 # Initialize the Rails application.
 Rails.application.initialize!
+
+# Disable field_with_errors div wrapper for form inputs
+ActionView::Base.field_error_proc = Proc.new { |html_tag, instance| html_tag.html_safe }