表单标签页必填字段提交问题：仅需验证激活标签页内的必填项

问题核心：浏览器原生表单验证会检查所有带required属性的元素，无论元素是否隐藏，导致非激活标签页的必填字段也会阻止表单提交。我们可以通过禁用非激活标签页的表单元素来实现仅验证当前激活标签的需求，同时保留required属性。

步骤1：修正HTML结构（解决表单嵌套问题） #

原代码中存在表单嵌套的错误（HTML不允许form标签嵌套），调整为单个外层表单包含所有标签页内容：

<form class="right" method="post">
    <h1>购物车</h1>

    <div class="tabs">
        <div class="tab-link active" onclick="openTab(event, 'fizickaLica')">个人用户</div>
        <div class="tab-link" onclick="openTab(event, 'pravnaLica')">企业用户</div>
    </div>

    <div id="fizickaLica" class="tab active">
        <!-- 个人用户必填字段示例 -->
        <label>姓名：<input type="text" name="fullName" required></label>
        <label>邮箱：<input type="email" name="email" required></label>
    </div>

    <div id="pravnaLica" class="tab">
        <!-- 企业用户必填字段示例 -->
        <label>企业名称：<input type="text" name="companyName" required></label>
        <label>税号：<input type="text" name="taxId" required></label>
    </div>

    <button type="submit">下单</button>
</form>

步骤2：修改JavaScript逻辑（切换标签时禁用/启用表单元素） #

在标签切换时，给非激活标签页的所有表单元素添加disabled属性（禁用元素不会触发原生验证，也不会被提交），激活标签页的元素移除disabled：

document.addEventListener("DOMContentLoaded", function() {
    const tabcontent = document.getElementsByClassName("tab");
    // 初始化：隐藏所有标签页，禁用非默认标签的表单元素
    for (let i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
        const inputs = tabcontent[i].querySelectorAll('input, select, textarea');
        inputs.forEach(input => input.disabled = true);
    }
    // 显示默认标签页，启用其表单元素
    const defaultTab = document.getElementById("fizickaLica");
    defaultTab.style.display = "block";
    defaultTab.classList.add("active");
    const defaultInputs = defaultTab.querySelectorAll('input, select, textarea');
    defaultInputs.forEach(input => input.disabled = false);
});

function openTab(event, tabName) {
    const tabcontent = document.getElementsByClassName("tab");
    const tablinks = document.getElementsByClassName("tab-link");

    // 重置所有标签页状态：隐藏、移除激活类、禁用表单元素
    for (let i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
        tabcontent[i].classList.remove("active");
        const inputs = tabcontent[i].querySelectorAll('input, select, textarea');
        inputs.forEach(input => input.disabled = true);
    }

    // 重置所有标签按钮状态
    for (let i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove("active");
    }

    // 设置当前激活标签页：显示、添加激活类、启用表单元素
    const activeTab = document.getElementById(tabName);
    activeTab.style.display = "block";
    activeTab.classList.add("active");
    const activeInputs = activeTab.querySelectorAll('input, select, textarea');
    activeInputs.forEach(input => input.disabled = false);

    event.currentTarget.classList.add("active");
}

步骤3：保留原有CSS #

你的CSS代码无需修改，继续使用即可：

.tab {
    display: none;
}

.tab.active {
    display: block;
}

原理说明 #

• disabled属性会让浏览器在表单验证和提交时忽略该元素，完美绕过非激活标签页的required验证。
• 保留了required属性，确保激活标签页的字段仍能触发原生必填验证。

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