Bootstrap多表单验证问题：多表单依赖首个表单字段完成验证

核心问题 #

你的代码仅对第一个表单初始化了Bootstrap表单验证逻辑，其余表单未绑定对应验证事件，导致提交其他表单时，触发的是第一个表单的验证规则，表现为必须填完第一个表单才能让其他表单正常验证。

具体问题点 #

1. 选择器覆盖不全：代码里用document.querySelector('form')只选中页面第一个<form>元素，仅给它绑定了提交事件和验证逻辑，其余表单完全没被处理。
2. 未做批量处理：没有循环遍历页面所有表单，导致每个表单无法独立触发自身的验证流程。

修复步骤 #

1. 替换选择器：把document.querySelector('form')改成document.querySelectorAll('form')，选中页面所有表单元素。
2. 批量绑定验证逻辑：通过循环为每个表单单独绑定提交事件，确保每个表单的验证独立运行。

修复后的核心JavaScript代码示例：

// 选中所有表单并逐个处理
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function (event) {
    if (!this.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    this.classList.add('was-validated');
  }, false);
  
  // 可选：添加实时验证逻辑，输入时触发验证状态更新
  form.querySelectorAll('.form-control').forEach(input => {
    input.addEventListener('input', function() {
      form.classList.add('was-validated');
    });
  });
});

额外注意事项 #

• 每个<form>元素都要加上novalidate属性，禁用浏览器默认验证，让Bootstrap自定义验证生效：

  <form class="needs-validation" novalidate>
    <!-- 表单控件内容 -->
  </form>
  

• 确保表单控件（如input、select）都放在对应表单内部，不要跨表单嵌套，且正确设置required等验证属性。

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