使用JavaScript静默提交Rails Devise用户表单问题排查

问题出在你触发表单提交的方式和事件处理逻辑上，以下是具体的修复方案：

核心原因 #

Rails UJS（处理remote: true的机制）是通过监听**submit.rails**这个自定义事件来实现AJAX提交的。直接调用$('#edit_user').submit()会触发原生的submit事件，但可能绕过了UJS的绑定逻辑，导致页面重载；而直接用e.preventDefault()则完全阻止了所有提交行为，包括AJAX请求。

修复步骤 #

1. 正确触发UJS的AJAX提交 #

修改按钮点击事件的代码，改用trigger('submit.rails')来触发表单的AJAX提交，同时阻止按钮的默认行为：

btnContinue.addEventListener("click", (e) => {
  e.preventDefault(); // 阻止按钮本身的默认行为（比如如果是submit按钮的话）
  $("#edit_user").trigger("submit.rails");
});

2. 监听AJAX成功事件，引导下一步 #

在表单上绑定ajax:success事件，当AJAX提交成功后，再执行向导步骤切换的逻辑：

$("#edit_user").on("ajax:success", function() {
  // 这里写引导用户到下一步的代码，示例：
  // 隐藏当前步骤，显示下一个步骤
  $(".wizard-step.active").removeClass("active").hide();
  $(".wizard-step.next-step").addClass("active").show();
  
  // 如果是页面跳转式向导，也可以用：
  // window.location.href = "/wizard/next-step";
});

3. 额外检查点 #

• 确认表单HTML中已生成data-remote="true"属性（remote: true应该自动生成），可通过浏览器开发者工具查看表单标签。
• 确保Rails UJS脚本正确加载：
  • Rails 5及更早版本：application.js中包含//= require rails-ujs
  • Rails 6+：application.js中包含import Rails from "@rails/ujs"; Rails.start();
• 避免在表单的submit事件监听器中滥用e.preventDefault()，除非你完全想接管提交逻辑。

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