本文讲解如何在含多个标签页（tabs）的表单中，使浏览器原生 required 校验仅作用于当前可见标签页的输入项，避免因隐藏标签页中未填写的 required 字段导致整体提交失败。

本文讲解如何在含多个标签页（tabs）的表单中，使浏览器原生 required 校验仅作用于当前可见标签页的输入项，避免因隐藏标签页中未填写的 required 字段导致整体提交失败。

在构建多步骤或分类型表单（如“自然人”与“法人”两种注册/下单流程）时，常见需求是：用户只需填写当前激活标签页中的必填字段即可提交，而另一标签页即使包含 required 属性，也不应参与 HTML5 表单验证。但默认情况下，只要 <form></form> 内存在未填写的 required 输入框，form.checkValidity() 就返回 false，且点击任意 type="submit" 按钮都会触发全表单校验——这正是问题根源。

✅ 正确结构：每个标签页独立为一个 <form></form>

核心原则是避免将多个逻辑表单塞入同一个 <form></form> 标签内。HTML 规范要求 method、action 等属性仅对 <form></form> 有效；而将两个 submit 按钮置于同一表单下，会导致任一按钮点击都触发整个表单的 required 校验（无论其他字段是否隐藏）。因此，应为每个标签页创建独立的 <form></form>：

<section class="right"><h1>Korpa</h1>
  <div class="tabs">
    <button class="tab-link active" onclick="openTab(event, 'fizickaLica')">Fizička lica</button>
    <button class="tab-link" onclick="openTab(event, 'pravnaLica')">Pravna lica</button>
  </div>

  <div id="fizickaLica" class="tab active">
    <form class="form" id="checkoutForm" method="post">
      <label>Ime: <input type="text" name="ime" required></label>
      <label>Prezime: <input type="text" name="prezime" required></label>
      <button type="submit">Poruči (Fizička lica)</button>
    </form>
  </div>

  <div id="pravnaLica" class="tab">
    <form class="form" id="checkoutFormPravna" method="post">
      <label>Naziv firme: <input type="text" name="naziv" required></label>
      <label>PIB: <input type="text" name="pib" required></label>
      <button type="submit">Poruči (Pravna lica)</button>
    </form>
  </div>
</section>

✅ JavaScript 控制逻辑：解耦显示与校验

• 移除冗余内联样式控制：不再用 JS 手动设置 display: none/block，改用 CSS 类切换（更可靠、可维护）；
• 禁用非当前表单的提交行为（可选但推荐）：例如，当用户在“法人”标签页时，可临时禁用“自然人”表单的 submit 按钮，或通过 event.preventDefault() 拦截其提交（若需统一后端处理逻辑）；
• 优化标签切换逻辑：使用 classList.toggle() 简化状态管理，并确保每次只激活一个 tab：

document.addEventListener('DOMContentLoaded', () => {
  // 默认禁用「法人」表单提交（防止误触），实际项目中可根据业务决定是否拦截
  const pravnaForm = document.getElementById('checkoutFormPravna');
  if (pravnaForm) {
    pravnaForm.addEventListener('submit', e => e.preventDefault());
  }

  // 切换标签页
  window.openTab = function(event, tabName) {
    event.preventDefault();

    // 隐藏所有 tab
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
    // 显示目标 tab
    document.getElementById(tabName).classList.add('active');

    // 同步 tab-link 激活态
    document.querySelectorAll('.tab-link').forEach(link => link.classList.remove('active'));
    event.currentTarget.classList.add('active');
  };
});

✅ CSS 样式建议（配合 JS）

.tab {
  display: none;
}
.tab.active {
  display: block;
}
.tab-link.active {
  font-weight: bold;
  color: #007bff;
}

⚠️ 注意事项

• 不要在 <div> 上写 <code>method="post"：该属性仅对 <form></form> 有效，否则会被忽略；
• 避免重复 ID 或未闭合标签：示例中