Rails表单无确认弹窗：保留turbo:false同时实现确认功能

算力阿峰

2026-6-15

问题

Rails表单提交时不弹出确认对话框。生成的HTML代码如下：

<form data-turbo="false" data-turbo-confirm="Are you sure?" action="/mergeables/cancel" accept-charset="UTF-8" method="post">
    <input type="hidden" name="authenticity_token" value="[..]" autocomplete="off">
    <input value="8" autocomplete="off" type="hidden" name="id" id="id">
    <input type="submit" name="commit" value="Cancel merge" data-disable-with="Cancel merge">
</form>

该表单由以下ERB代码生成：

<%= form_with(url: cancel_mergeables_path, data: { turbo: false, turbo_confirm: t('mergeable.cancel_confirm') } ) do |form| %>
  <%= form.hidden_field :id, value: mergeable.id %>
  <%= form.submit t('user.merge_cancel').capitalize %>
<% end %>

移除turbo: false后确认对话框可正常显示，但需要在以HTML方式处理表单的同时，保留操作确认对话框。

解决方案

data-turbo="false"会完全禁用Turbo对表单的所有处理逻辑，包括data-turbo-confirm的确认弹窗，因此两者无法同时生效。可以通过以下两种方式解决：

方法1：改用原生Rails UJS的确认属性

既然要以纯HTML方式提交表单，直接使用Rails支持的原生confirm属性替代Turbo的确认逻辑：

<%= form_with(url: cancel_mergeables_path, data: { turbo: false, confirm: t('mergeable.cancel_confirm') } ) do |form| %>
  <%= form.hidden_field :id, value: mergeable.id %>
  <%= form.submit t('user.merge_cancel').capitalize %>
<% end %>

生成的HTML会带有data-confirm属性，Rails UJS会处理该属性弹出原生确认对话框，同时表单保持纯HTML提交方式。

方法2：保留Turbo并指定HTML响应格式

如果不想完全禁用Turbo，可以通过指定响应格式，让Turbo以HTML方式处理提交，同时保留data-turbo-confirm的确认逻辑：

<%= form_with(url: cancel_mergeables_path, data: { turbo_confirm: t('mergeable.cancel_confirm') }, format: :html ) do |form| %>
  <%= form.hidden_field :id, value: mergeable.id %>
  <%= form.submit t('user.merge_cancel').capitalize %>
<% end %>

这样既保留了Turbo的确认弹窗，又确保表单提交后服务器返回HTML格式响应，满足纯HTML处理的需求。