Bootstrap5表单验证后Ajax提交需两次点击的问题求助

两个bug都来自事件逻辑的错误嵌套：

1. 你在原生submit事件的处理函数内部，又用jQuery给表单绑定了一次新的submit监听器。第一次点击提交时，代码只完成了「绑定新监听器」的操作，没有执行Ajax逻辑；第二次点击时，之前绑定的监听器才会被触发，这就是点两次才能发请求的原因。
2. 原逻辑没有在表单验证失败时中断执行，哪怕字段校验不通过，后续绑定监听器、发送请求的代码还是会运行，自然会出现空表单也发请求的问题。

直接删掉嵌套的jQuery submit绑定层，把Ajax逻辑放到验证通过的分支里，验证失败直接return终止执行即可，修复后完整代码如下：

(function () {
  'use strict'

  // 获取所有需要应用Bootstrap验证样式的表单
  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()) {
        form.classList.add('was-validated')
        return
      }

      form.classList.add('was-validated')
      
      // 校验通过：直接收集数据发送Ajax请求，不需要额外绑定submit事件
      var formData = {
        firstName_r: jQuery('#firstName_r').val(),
        lastName_r: jQuery('#lastName_r').val(),
        action: 'the_ajax_mail'
      }

      $.ajax({
        type: 'POST',
        url: "<?php echo admin_url('admin-ajax.php'); ?>",
        data: formData,
        encode: true
      }).done(function(data) {
        console.log(data)
        // 提交成功后的逻辑
        form.classList.remove('was-validated')
        form.reset()
        document.getElementById('submitForm').disabled = true
      }).fail(function(data) {
        console.log(data)
        // 提交失败可在此处添加错误提示
      })
    }, false)
  })
})()

• 禁止在事件回调函数内部重复给同一个元素绑定同类型事件，这种写法必然会导致触发时机错乱、事件多次触发的问题。
• 如果你的页面中只有id为orderform的表单需要这套逻辑，可以把表单选择器改为document.querySelectorAll('#orderform.needs-validation')，避免给其他无关表单绑定事件。

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