Rails表单提交时错误信息无法在页面显示的问题排查

作为Rails新手，我编写了注册相关的控制器、路由和视图代码。提交包含错误的表单时，控制台能输出错误信息，但页面模板无法渲染显示这些错误。相关代码如下：

控制器代码（app/controllers/signup_controller.rb） #

class SignupController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to root_path, notice: "You are logged in as #{@user[:username]}"
    else
      puts @user.errors.full_messages
      render :new
    end
  end

  private
  def user_params
    puts params
    params.require(:user).permit(:email, :password, :password_confirmation, :username)
  end
end

路由代码（config/routes.rb） #

Rails.application.routes.draw do
  root to: "home#index"
  get '/about-us', to: "about#index", as: :about

  # signing up
  get 'sign_up', to: "signup#new"
  post 'sign_up', to: "signup#create"

end

视图代码（app/views/signup/new.html.erb） #

<h1>Sign Up</h1>
<%= form_with model: @user, url: sign_up_path do |form| %>
    <%= @user.errors.full_messages.inspect %>
    <% if @user.errors.any? %>
     <div class="alert alert-danger">
        <% @user.errors.full_messages.each do |message| %>
            <div><%= message %></div>
        <% end %>
     </div>
    <% end %>
   <div class="mb-3">
        <%= form.label :email, class: "form-label"%>
        <%= form.text_field :email, placeholder: "email@gmail.com", class: "form-control"%>
    </div>
    <div class="mb-3">
        <%= form.label :username, class: "form-label"%>
        <%= form.text_field :username, placeholder: "username", class: "form-control"%>
    </div>
    <div class="mb-3">
        <%= form.label :password, class: "form-label"%>
        <%= form.password_field :password, placeholder: "password", class: "form-control"%>
    <div class="mb-3">
        <%= form.label :password_confirmation, class: "form-label"%>
        <%= form.password_field :password_confirmation, placeholder: "password", class: "form-control"%>
    </div>
    <div class="mb-3">
        <%= form.submit "Sign Up", class: 'btn btn-primary'%>
    </div>
<% end %>

控制台输出的错误信息 #

Password can't be blank
Email can't be blank
Email invalid email address
Username can't be blank

问题原因及解决办法 #

1. Turbo AJAX提交导致页面未更新 #

Rails默认的form_with会使用Turbo以AJAX方式提交表单，而当前代码没有处理Turbo的响应逻辑，导致render :new后页面无法正常刷新显示错误信息。

解决办法：给form_with添加local: true选项，强制表单以普通HTTP请求提交：

<%= form_with model: @user, url: sign_up_path, local: true do |form| %>

2. HTML结构错误（未闭合的div标签） #

视图中密码字段的<div class="mb-3">没有闭合，导致HTML结构错乱，可能影响错误信息区块的渲染。

解决办法：补上密码字段的闭合</div>标签：

<div class="mb-3">
    <%= form.label :password, class: "form-label"%>
    <%= form.password_field :password, placeholder: "password", class: "form-control"%>
</div> <!-- 补上这个闭合标签 -->
<div class="mb-3">
    <%= form.label :password_confirmation, class: "form-label"%>
    <%= form.password_field :password_confirmation, placeholder: "password", class: "form-control"%>
</div>

修复以上两个问题后，提交错误表单时，页面就能正常渲染显示错误信息了。

内容的提问来源于stack exchange，提问作者crispengari