Bootstrap5表单验证提交成功后才触发模态框的实现方法

你的代码不生效是三个问题叠加导致的：

• 按钮上写了data-bs-toggle="modal"，Bootstrap 5会自动为这个元素绑定点击触发模态框的默认逻辑，点击时会直接触发模态框，完全跳过表单验证判断。
• 原逻辑没有做分支判断，无论表单是否通过校验，都会执行设置target属性的代码，哪怕拦截了提交事件，模态框的触发目标已经被赋值。
• 操作dataset时属性名写错：Bootstrap 5识别的触发目标属性是data-bs-target，对应的DOM属性是dataset.bsTarget，你写的dataset.target修改的是data-target属性，Bootstrap 5不会读取这个属性。

不要依赖Bootstrap的自动data属性绑定模态框触发逻辑，改为表单验证通过后，手动调用Bootstrap提供的Modal API触发弹窗：

1. 先移除提交按钮上的data-bs-toggle="modal"和空data-bs-target属性，禁止自动触发逻辑。
2. 调整表单submit事件监听逻辑，校验不通过直接拦截返回，校验通过后再手动调用模态框的show()方法触发弹窗。

修复后的完整代码如下：

<div class="form-button mt-3">
  <button id="submit" type="submit" class="site-btn">Send</button>
</div>

(function() {
  'use strict'
  const forms = document.querySelectorAll('.requires-validation')
  // 提前初始化确认模态框实例
  const confirmModal = new bootstrap.Modal(document.getElementById('confrimationModal'))

  Array.from(forms)
    .forEach(function(form) {
      form.addEventListener('submit', function(event) {
        form.classList.add('was-validated')
        // 校验不通过直接拦截，终止后续逻辑
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
          return
        }

        // 校验通过后拦截默认表单提交行为，手动触发模态框
        event.preventDefault()
        confirmModal.show()

        // 如果需要在弹模态框的同时提交表单，可以在这里写ajax提交逻辑，拿到提交成功响应后再弹框即可
      }, false)
    })
})()

• 如果你的表单是传统同步提交模式，提交后页面会刷新，前端触发的模态框会随页面重载消失，这种场景建议改为ajax异步提交，拿到服务端的成功响应后再触发模态框。
• 注意核对模态框id的拼写，你代码里写的confrimationModal存在拼写错误（正确拼写为confirmationModal），请和你HTML中定义的模态框id保持一致，避免找不到DOM报错。

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