使用Twitter Bootstrap Wizard时第二步自动触发下一步点击的问题

问题描述 #

使用Twitter Bootstrap Wizard搭建分步表单，结构为三步：step1/step2包含输入框和Next按钮，step3包含提交按钮。通过自定义validate()函数实现步骤验证，预期验证不通过时阻止进入下一步，但进入第二步时，系统会自动触发第二步Next按钮的点击操作，导致验证报错；禁用validate()函数后该问题消失。

相关代码 #

HTML结构

<!-- Step 1 -->
<div class="tab-pane step" id="progress-station-profile">
  <!-- 表单字段 -->
  <button onclick="return validate('progress-station-profile')" class="btn btn-primary">Next</button>
</div>

<!-- Step 2 -->
<div class="tab-pane step" id="progress-station-owner">
  <!-- 表单字段 -->
  <button onclick="return validate('progress-station-owner')" class="btn btn-primary">Next</button>
</div>

<!-- Step 3 -->
<div class="tab-pane step">
  <!-- 表单字段 -->
  <button type="submit" class="btn btn-primary me-1"> Save Station</button>
</div>

验证函数

function validate(step){
    let window = document.getElementById(step);

    window.querySelectorAll("input,select,textarea").forEach(e=>{
      if(!e.checkValidity()){
        e.classList.toggle("is-invalid");
        event.preventDefault();
        event.stopPropagation();
        return false;
      }
    });
    return true;
  }

原因分析 #

1. 事件对象使用错误
   你在onclick事件中未传递当前点击事件对象，函数内直接使用全局event对象执行preventDefault()和stopPropagation()。这种写法依赖浏览器全局事件上下文，在Bootstrap Wizard的步骤切换逻辑中，会导致事件处理混乱：要么当前点击的默认行为未被正确阻止，要么错误干扰了Wizard的步骤切换事件链，最终触发第二步按钮的意外点击。

2. forEach内的return无法终止整个函数
   forEach循环中的return false仅会终止当前元素的迭代，不会停止整个循环，也不会让validate()函数返回false。即使某一步存在无效字段，函数仍会执行到末尾的return true，导致步骤跳转被错误允许。进入第二步后，Wizard的内部逻辑因之前的事件混乱，触发第二步按钮的点击，此时第二步字段未填写，自然触发验证报错。

3. 类切换逻辑异常（间接影响）
   使用e.classList.toggle("is-invalid")会在验证失败时切换类状态，若字段之前已有该类，会被意外移除，导致表单状态显示异常，可能进一步触发浏览器的表单验证相关事件，间接引发按钮点击问题。

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