Rails表单从其他页面跳转后无法提交问题排查

核心问题分析 #

全站通过应用内Turbo导航进入的页面，表单完全无法提交且控制台无报错；但直接访问/刷新页面后表单提交正常，这说明问题出在Turbo的页面加载/表单处理逻辑上。

排查与解决步骤 #

1. 修正Turbo表单模式配置 #

你之前使用的Turbo.setFormMode存在语法错误，"on" | "off" | "optin"是选项说明，实际配置只能传入单个字符串值。正确写法如下，将其放入application.js：

// 强制所有表单使用Turbo提交
Turbo.setFormMode("on");

// 或者禁用Turbo表单处理，恢复传统提交方式
// Turbo.setFormMode("off");

修改后重启服务器，测试表单提交是否恢复。

2. 给表单添加Turbo控制属性 #

如果不想全局修改，可以给单个表单直接指定Turbo行为，通过data-turbo属性强制控制：

<%= form_with model: @user, url: user_settings_path(user_id: @user.id), method: :patch, data: { turbo: true } do |form| %>
  <!-- 表单字段 -->
<% end %>

也可以尝试设置data-turbo="false"，强制跳过Turbo处理，用传统方式提交，以此确认是否是Turbo拦截导致的问题。

3. 修复JS事件绑定逻辑 #

Turbo导航只会更新页面主体内容，传统的DOMContentLoaded事件不会重复触发，导致自定义的表单事件绑定失效。需改用Turbo专属事件绑定：

// 替换DOMContentLoaded，用turbo:load确保每次页面加载都绑定事件
document.addEventListener("turbo:load", function() {
  // 在这里编写表单提交相关的JS逻辑，比如按钮点击、表单验证等
});

同时检查是否有JS代码错误调用event.preventDefault()，阻止了表单的默认提交行为。

4. 检查服务器端响应格式 #

Turbo默认期望表单提交后返回HTML或Turbo Stream响应，如果服务器返回JSON或其他非预期格式，会导致Turbo处理异常且无反馈。确保控制器的update动作返回正确响应：

def update
  if @user.update(user_params)
    redirect_to user_settings_path, notice: "设置更新成功"
  else
    # 渲染编辑页面，保留表单错误信息
    render :edit
  end
end

避免返回纯JSON响应，除非你特意用Turbo Stream处理异步更新。

5. 清除Turbo页面缓存 #

Turbo的页面缓存可能保留了有问题的旧页面，导致导航后表单异常。可以在页面的<head>中添加缓存控制：

<meta name="turbo-cache-control" content="no-cache">

或者手动清除浏览器缓存，硬刷新页面后重新测试导航流程。

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