Bootstrap表单验证错误时Modal仍弹出的解决方法

你的问题出在触发模态框的按钮上——现在用的是type="button"按钮，还加了data-bs-toggle和data-bs-target属性，点击时直接绕过表单验证逻辑弹出模态框，完全没和你的验证代码联动。

要让模态框只在表单验证通过后弹出，按以下步骤修改：

1. 调整按钮类型与属性 #

把原来的触发按钮改成type="submit"，同时移除data-bs-toggle和data-bs-target属性，这样点击按钮会触发表单的submit事件，让你的验证逻辑生效：

<button type="submit" class="btn btn-primary">提交注册</button>

2. 修改JS验证逻辑，手动触发模态框 #

在表单的submit事件处理函数中，先拦截默认提交行为，验证通过后再手动弹出模态框：

(function() {
  'use strict'

  var forms = document.querySelectorAll('.needs-validation')

  Array.prototype.slice.call(forms)
    .forEach(function(form) {
      form.addEventListener('submit', function(event) {
        // 先阻止默认提交行为，避免页面刷新
        event.preventDefault()
        event.stopPropagation()

        // 验证通过时才弹出模态框
        if (form.checkValidity()) {
          var modal = new bootstrap.Modal(document.getElementById('exampleModal'))
          modal.show()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

3. 可选：模态框保存按钮逻辑补充 #

如果需要在模态框点击「Save changes」后处理表单提交（比如AJAX提交），可以给该按钮添加事件监听：

document.querySelector('#exampleModal .btn-primary:last-child').addEventListener('click', function() {
  // 这里编写表单提交逻辑
  console.log('表单提交成功')
  // 关闭模态框
  bootstrap.Modal.getInstance(document.getElementById('exampleModal')).hide()
})

修改完成后，点击按钮会先执行表单验证，只有所有必填项填写完整、勾选协议后，模态框才会弹出；验证不通过时只会显示错误提示，不会触发模态框。

内容的提问来源于stack exchange，提问作者Emir Bolat