如何在Devise表单存在验证错误时保持模态框处于打开状态？

我完全懂你的困扰——用Devise做的注册表单放在Bootstrap模态框里，提交空表单触发验证错误后，模态框居然自己关了，之前加的脚本完全没起作用。这其实是因为你用了remote: true做AJAX提交，页面不会刷新，原来$(document).ready里的判断根本不会在提交后执行。我给你一步步梳理解决方法：

第一步：自定义Devise注册控制器 #

首先得让Devise在验证失败时能正确响应AJAX请求。先生成自定义的注册控制器：

rails generate devise:controllers users

然后在config/routes.rb里指定使用这个控制器：

devise_for :users, controllers: { registrations: 'users/registrations' }

接着打开app/controllers/users/registrations_controller.rb，重写create方法来处理AJAX失败场景：

class Users::RegistrationsController < Devise::RegistrationsController
  respond_to :html, :js

  def create
    super do |resource|
      if resource.errors.any?
        # 验证失败时，渲染JS模板更新模态框内容
        respond_to do |format|
          format.js { render :new }
        end
        return
      end
    end
  end
end

第二步：创建对应的JS响应模板 #

我们需要一个JS模板来处理验证失败后的页面操作，创建app/views/devise/registrations/new.js.erb文件，写入以下内容：

// 替换模态框内的表单内容，把带错误提示的新表单渲染进去
$('.modal-body').html('<%= j render "devise/registrations/new" %>');
// 强制保持模态框处于打开状态
$('#exampleModal').modal('show');

这个模板会在验证失败时被执行，它会用带有错误信息的表单替换模态框里的旧内容，同时确保模态框不会关闭。

第三步：确认表单的remote: true设置 #

你原来表单里的remote: true是完全正确的，这个设置让表单通过AJAX提交，这样我们才能在不刷新页面的前提下处理错误并维持模态框的状态。

为什么你之前的脚本没用？ #

你之前写的$(document).ready里的判断只会在页面首次加载时运行，但AJAX提交后页面并没有刷新，所以这段代码不会重新执行，自然没法在验证失败时重新打开模态框。而我们上面的方法是通过Devise的AJAX响应直接操作DOM，这才是适配AJAX场景的正确处理方式。

备注：内容来源于stack exchange，提问作者Benjamin Sunderland