Bootstrap 表单提交按钮触发模态框闪退问题的完整解决方案

✅ 正确思路：分离「验证触发」与「真实提交」

模态框不应由 submit 按钮直接触发，而应作为验证失败后的反馈容器。真正的提交动作需由 JavaScript 控制，或通过条件化按钮类型实现：

方案一：服务端验证 + 条件渲染按钮（推荐，简洁可靠）

利用 CodeIgniter 4 的 $validation->hasError() 或 $validation->listErrors() 判断是否需展示错误模态框，并动态生成对应按钮：

<!-- 在视图中（如 form.php） -->
<?php if (isset($validation) && $validation->hasError()) : ?>
    <!-- 验证失败：显示带模态框触发的普通按钮（非 submit） -->
    <button type="button" 
            class="btn btn-primary me-2" 
            data-bs-toggle="modal" 
            data-bs-target="#exampleModal">
        Submit
    </button>
<?php else : ?>
    <!-- 验证通过：直接提交表单 -->
    <button type="submit" class="btn btn-primary me-2">
        Submit
    </button>
<?php endif; ?>

同时确保你的模态框 HTML 保持原结构（注意添加 data-bs-backdrop="static" 和 data-bs-keyboard="false" 可增强用户体验，防止点击背景关闭）：

<?php if (isset($validation) && $validation->hasError()) : ?>
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">The following fields are required</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="text-danger">
          <?= $validation->listErrors() ?>
        </div>
      </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" onclick="document.getElementById('your-form-id').querySelector('[required]:invalid')?.focus()">Fix Errors</button>
      </div>
    </div>
  </div>
</div>
<?php endif; ?>

⚠️ 关键注意事项

• ✅ 始终使用 type="button" 触发模态框，杜绝 type="submit" 与 data-bs-toggle 混用；
• ✅ 确保模态框 HTML 在 if (validation has error) 条件下渲染，避免 DOM 中存在未激活的冗余模态框节点；
• ✅ 在 Controller 中，务必调用 $this->validator->run($data) 并将 $validation 对象传入视图（如 return view('form', ['validation' => $this->validator]);）；
• ✅ 若需客户端实时校验，建议补充 HTML5 required 属性 + :invalid CSS 样式，与服务端验证形成双重保障。

方案二：纯前端拦截（适用于轻量场景）

若希望统一使用一个提交按钮并完全由 JS 控制流程，可禁用默认提交并手动处理：

<form id="myForm" method="post">
  <!-- 表单字段 -->
  <button type="submit" class="btn btn-primary me-2" id="submitBtn">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交

  // 检查是否有服务端传入的错误（例如通过 data-* 属性或隐藏字段）
  const hasErrors = <?= json_encode(isset($validation) && $validation->hasError()) ?>;

  if (hasErrors) {
    const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
    modal.show();
  } else {
    this.submit(); // 验证通过，执行真实提交
  }
});
</script>

总结

解决 Bootstrap 模态框“闪退”问题的本质，是厘清用户操作流：
? 提交 → 后端验证 → 返回结果 → 前端响应（成功跳转 / 失败弹窗）；
而非试图让 submit 按钮“兼职”模态框触发器。采用条件化按钮渲染，既符合语义化 HTML 原则，又与 CodeIgniter 4 的验证生命周期天然契合，稳定、易维护、无副作用。