Flask表单点击标签页自动触发POST请求问题求助

以下是逐步排查的方向，按优先级从高到低：

• 检查标签页切换元素的类型与属性
  如果你的标签页切换用的是<button>标签，且没有显式设置type="button"，那么它在<form>标签内默认的type是submit，点击时会自动提交表单。尤其是当输入框满足验证条件（比如填了内容，即使移除了required，可能还有其他隐式验证）时，浏览器就会触发提交。解决方法是给所有标签页按钮加上type="button"：

  <button type="button" data-bs-toggle="tab">切换到表格标签</button>
  

• 查看输入框的事件绑定
  检查头部输入框是否绑定了blur、change这类事件，且事件处理函数中调用了表单提交（比如document.getElementById('form-id').submit()）。当你点击标签页时，输入框失去焦点触发blur事件，进而触发提交。可以通过浏览器开发者工具的Elements面板，查看输入框的事件监听，或者直接搜索代码中的blur、change相关逻辑。

• 追踪请求发起源头
  打开浏览器开发者工具（F12），切换到Network面板，操作触发POST请求后，点击该请求查看Initiator列，这里会显示请求是由哪个元素或JS函数触发的。如果是某个JS函数，直接定位到该函数代码检查；如果是HTML元素，查看该元素的属性和绑定的事件。

• 排查全局JS事件监听
  检查是否有全局的点击事件监听（比如document.addEventListener('click', ...)或jQuery的$(document).on('click', ...)），选择器范围过大（比如选中了所有.tab类元素），并且在回调中执行了表单提交逻辑。可以暂时注释掉这类全局监听，测试是否还会触发提交。

• 简化代码定位问题
  暂时移除所有自定义JS代码、第三方组件（比如标签页插件），只保留基础的<form>、输入框和标签页HTML，测试是否还会触发提交。如果问题消失，再逐步恢复代码，每次恢复一部分后测试，直到定位到导致问题的代码段。

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