JQuery onsubmit绑定函数执行两次问题求助

核心原因 #

导致提示重复出现的主要原因有以下几点：

1. 事件重复绑定 #

如果这段提交事件的绑定代码被多次执行（比如页面动态加载、脚本被重复引入、放在了会重复触发的回调逻辑里），会给#add-form的submit事件绑定多个相同的处理函数。每次表单触发提交时，所有绑定的函数都会执行一遍，自然就会重复弹出提示。

2. 阻止默认行为的时机错误 #

你把e.preventDefault()放在了验证逻辑之后，而非函数开头。如果前半段的Bootstrap Validator验证逻辑触发了某种隐式的提交行为，或者浏览器默认的提交流程没被及时阻断，就可能导致事件被二次触发。

3. Bootstrap Validator的额外触发 #

Bootstrap Validator在完成验证后，可能会自动触发一次表单提交（尤其是手动调用validate()方法后），这会导致你的处理函数被再次执行，重复弹出提示。

对应的修复方案 #

• 避免事件重复绑定：把事件绑定代码放在只会执行一次的位置（比如页面加载完成的$(function(){})里，且确保脚本只引入一次），或者使用off()先解绑再绑定，防止重复：

  // 先解绑再绑定，避免重复绑定事件
  $("#add-form").off("submit").on("submit", function (e) {
      // 原逻辑代码
  })
  

• 提前阻止默认行为：把e.preventDefault()放在函数最开头，彻底阻断浏览器的默认提交流程：

  $("#add-form").on("submit", function (e) {
      e.preventDefault(); // 移到函数最开头
      var isValid = $('#add-form').data('bootstrapValidator').isValid();
      // 后续逻辑...
  })
  

• 优化验证后的逻辑：当验证不通过时，直接返回即可（已经用e.preventDefault()阻断了默认行为），不需要返回false，同时避免Bootstrap Validator重复触发提交：

  if (isValid == null || !isValid) {
      $('#add-form').data('bootstrapValidator').validate();
      return; // 直接返回终止函数执行
  }
  

• 调整按钮状态逻辑：如果按钮原本是在提交时被禁用的，应该只在验证通过且符合日期时间规则的情况下才启用，避免用户重复点击触发多次提交。

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