本文详解如何在 Bootstrap 5 多步骤表单中，仅对当前激活的 Tab 页进行 HTML5 表单验证，避免“Next”按钮触发全表单校验，同时保持单个 结构以支持最终统一提交。

本文详解如何在 bootstrap 5 多步骤表单中，仅对当前激活的 tab 页进行 html5 表单验证，避免“next”按钮触发全表单校验，同时保持单个 `

` 结构以支持最终统一提交。

在 Bootstrap 5 中构建多步骤向导（Wizard）时，一个常见痛点是：当多个 Tab 内嵌多个独立 <form></form> 元素时，虽可实现按页验证，但无法一次性提交全部字段；而若将所有字段置于单个 <form></form> 中，则浏览器原生 required、pattern 等验证会作用于整个表单——点击“Next”时，未填写的后续 Tab 字段也会报错，破坏用户体验。

✅ 正确解法是：保留单一 <form></form> 结构（确保最终可统一提交），但通过 JavaScript 动态控制验证范围——仅对当前激活 Tab 内的必填字段执行校验。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

核心思路

• 不使用多个 <form></form>，而是用一个顶层 <form id="global"></form> 包裹所有步骤内容；
• 每个 Tab（.tab-pane）内不包含 <form></form> 标签，仅放置表单控件（<input>、<select></select> 等）；
• “Next”按钮点击时，仅收集当前激活 Tab 内的 :required 字段，并手动调用 .checkValidity()；
• 若校验失败，阻止跳转并聚焦首个无效字段；若通过，则切换到下一页。

示例实现（精简可靠版）

<!-- 统一表单容器 -->
<form id="global" method="post">
  <div id="rootwizard">
    <ul class="nav nav-pills form-wizard-header mb-3">
      <li class="nav-item">
        <a href="#basic" data-bs-toggle="tab" class="nav-link active">Info</a>
      </li>
      <li class="nav-item">
        <a href="#first" data-bs-toggle="tab" class="nav-link">Device</a>
      </li>
    </ul>

    <div class="tab-content">
      <!-- Step 1: Info -->
      <div class="tab-pane fade show active" id="basic">
        <div class="row mb-3">
          <label for="Client_Emp">Cliente/Empresa</label>
          <div>
            <input type="text" name="Client_Emp" id="Client_Emp" required />
          </div>
        </div>
      </div>

      <!-- Step 2: Device -->
      <div class="tab-pane fade" id="first">
        <div class="row mb-3">
          <label for="cpu">CPU</label>
          <div>
            <input type="text" name="cpu" id="cpu" required />
          </div>
        </div>
      </div>
    </div>

    <!-- 导航按钮 -->
    <ul class="list-inline wizard mb-0">
      <li class="previous list-inline-item"><a href="#" class="btn btn-outline-secondary">Previous</a></li>
      <li class="next list-inline-item float-end"><a href="#" class="btn btn-primary">Next</a></li>
    </ul>
  </div>
</form>

document.addEventListener('DOMContentLoaded', () => {
  const $form = $('#global');
  const $tabs = $('.tab-pane');
  const $nextBtn = $('.next a');
  const $prevBtn = $('.previous a');

  // 获取当前激活的 Tab 内所有 required 字段
  const getCurrentRequiredFields = () => {
    const $activeTab = $tabs.filter('.active');
    return $activeTab.find(':input[required]').filter(':visible');
  };

  // 手动触发当前页验证并返回是否通过
  const validateCurrentStep = () => {
    const $required = getCurrentRequiredFields();
    let isValid = true;

    $required.each((i, el) => {
      if (!el.checkValidity()) {
        isValid = false;
        el.reportValidity(); // 显示浏览器默认提示
        el.focus();
        return false; // break loop
      }
    });

    return isValid;
  };

  // Next 按钮逻辑
  $nextBtn.on('click', function (e) {
    e.preventDefault();
    if (validateCurrentStep()) {
      const $active = $('.tab-pane.active');
      const $next = $active.next('.tab-pane');
      if ($next.length) {
        // 切换 Tab（Bootstrap 5 方式）
        const targetId = $next.attr('id');
        $(`a[href="#${targetId}"]`).tab('show');
      }
    }
  });

  // Previous 按钮逻辑（简单切换）
  $prevBtn.on('click', function (e) {
    e.preventDefault();
    const $active = $('.tab-pane.active');
    const $prev = $active.prev('.tab-pane');
    if ($prev.length) {
      const targetId = $prev.attr('id');
      $(`a[href="#${targetId}"]`).tab('show');
    }
  });

  // 最终提交：整个表单自然校验（此时所有字段已填写）
  $form.on('submit', function (e) {
    // 可选：再次全局校验，或直接提交
    if (!this.checkValidity()) {
      e.preventDefault();
      e.stopPropagation();
      // 聚焦第一个无效字段（可选增强体验）
      this.querySelector(':invalid')?.focus();
    }
  });
});

⚠️ 注意事项

• 移除所有子 <form></form> 标签：这是关键。原问题中每个 Tab 内嵌 <form id="one"></form> 和 <form id="two"></form> 会导致 DOM 结构混乱及验证失控；
• 确保 required 字段在当前 Tab 可见：隐藏 Tab 中的 required 字段仍可能被 checkValidity() 检测到，因此务必配合 :visible 过滤；
• Bootstrap 5 的 Tab 激活事件：可监听 shown.bs.tab 做额外初始化（如加载异步内容），但验证逻辑建议放在按钮事件中，更可控；
• 无障碍支持：为每个 Tab 添加 aria-labelledby 和 role="tabpanel"，提升可访问性；
• 服务端兜底：前端验证仅为体验优化，后端必须重新校验全部字段。

通过该方案，你既能享受原生 HTML5 验证的简洁性与一致性，又能精准控制验证粒度，真正实现“一步一校验、一步一提交”，大幅提升多步骤表单的专业性与用户友好度。