Rails+Stimulus实现表单验证错误时保持模态框不关闭

使用Devise搭建注册/登录表单并迁移至Bootstrap模态框后，Devise的验证逻辑可正常生效，但提交表单后模态框会自动关闭。需要实现表单存在验证错误时保持模态框打开的功能，计划通过Stimulus控制器添加逻辑，但暂无思路。

现有代码 #

HTML（模态框与表单） #

<!-- Modal -->
<div class="modal fade" data-controller="modal" data-target="modal.modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Welcome! Please Log in</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= simple_form_for(resource, remote: true, as: resource_name, url: registration_path(resource_name), data: { action: "click->modal#submitForm" }) do |f| %>
            <%= f.error_notification, "data-search-target" => "error" %>

            <div class="form-inputs">
                <%= f.input :email,
                            required: true,
                            autofocus: true,
                            input_html: { autocomplete: "email" }%>
                <%= f.input :password,
                            required: true,
                            hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
                            input_html: { autocomplete: "new-password" } %>
                <%= f.input :password_confirmation,
                            required: true,
                            input_html: { autocomplete: "new-password" } %>
            </div>

            <div class="form-actions">
                <%= f.button :submit, "Sign up Now", class: 'btn btn-primary submit-button' %>
            </div>
         <% end %>

          <%= render "devise/shared/links" %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Log In</button>
        <%= button_to(
        "Log Out",
        destroy_user_session_path,
        method: :delete
      ) %>
      </div>
    </div>
  </div>
</div>

Stimulus控制器（Modal Controller） #

// Modal Controller.
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {

    static targets = [ "query", "errorMessage", "results" ]
    
    submitForm() {
        ### logic to go in here to prevent the POST request from being called if there are form errors.
    }
}

步骤1：修正HTML表单与模态框的标识 #

调整表单的事件绑定与目标标识，确保Stimulus能正确捕获表单与错误元素：

<!-- 修改后的form标签 -->
<%= simple_form_for(resource, remote: true, as: resource_name, url: registration_path(resource_name), data: { action: "submit->modal#handleSubmit", target: "modal.form" }) do |f| %>
    <!-- 修正错误提示的target标识 -->
    <%= f.error_notification, data: { target: "modal.error" } %>

    <!-- 原表单输入项保持不变 -->
    <div class="form-inputs">
        <%= f.input :email,
                    required: true,
                    autofocus: true,
                    input_html: { autocomplete: "email" }%>
        <%= f.input :password,
                    required: true,
                    hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
                    input_html: { autocomplete: "new-password" } %>
        <%= f.input :password_confirmation,
                    required: true,
                    input_html: { autocomplete: "new-password" } %>
    </div>

    <div class="form-actions">
        <%= f.button :submit, "Sign up Now", class: 'btn btn-primary submit-button' %>
    </div>
 <% end %>

步骤2：更新Stimulus控制器逻辑 #

通过监听AJAX请求的成功/错误事件，结合前端表单验证，实现模态框的状态控制：

// Modal Controller.
import { Controller } from "@hotwired/stimulus"
import * as bootstrap from 'bootstrap'

export default class extends Controller {
    // 更新targets为需要监听的元素
    static targets = ["modal", "form", "error"]

    connect() {
        // 初始化Bootstrap模态框实例
        this.modalInstance = new bootstrap.Modal(this.modalTarget)
        
        // 监听AJAX成功事件：注册成功时关闭模态框
        this.formTarget.addEventListener('ajax:success', () => {
            this.modalInstance.hide()
        })

        // 监听AJAX错误事件：注册失败时保持模态框打开
        this.formTarget.addEventListener('ajax:error', () => {
            this.modalInstance.show()
        })
    }

    handleSubmit(event) {
        // 先执行前端HTML5原生验证
        if (!this.formTarget.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            // 触发原生错误提示
            this.formTarget.reportValidity()
            return
        }
        // 前端验证通过后，交由Devise的remote:true处理AJAX提交
    }
}

关键逻辑说明 #

1. 事件绑定修正：将原click事件改为submit事件，覆盖所有表单提交场景（点击按钮/回车提交）。
2. 前端验证拦截：通过checkValidity()和reportValidity()在提交前做基础验证，拦截明显的错误（如空输入）。
3. AJAX状态监听：利用Deviseremote:true自带的ajax:success/ajax:error事件，分别处理注册成功（关闭模态框）和失败（保持模态框打开）的场景。
4. 模态框实例控制：通过Bootstrap Modal实例的show()/hide()方法精准控制模态框状态。

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