如何仅提交主表单及当前激活标签页的表单内容？

问题背景 #

我有一个包含主表单和两个详情模块的表单，详情模块分别位于两个不同的Tab标签页中，提交按钮仅在标签页外的主表单区域。需求是单次点击提交按钮时，仅提交主表单以及当前激活标签页的内容，但目前未激活标签页的必填字段仍会触发验证，导致无法完成提交。

解决方案 #

浏览器会验证表单内所有带有required属性的字段，哪怕元素被CSS隐藏。要实现仅提交激活页内容，需在提交时动态处理未激活标签页的表单元素：对未激活标签页内的字段设置disabled属性（浏览器不会提交禁用元素），同时移除required属性以跳过验证；切换标签页时恢复字段状态，保证后续交互正常。

修改后的完整代码 #

HTML代码

<form method="POST" action="abc.php" id="mainForm">
  <input type="text" name="mrno" id="mrno" required> <br>
  <input type="text" name="name1" id="name1" required> <br>
  <div class="tab">
    <button class="tablinks active" type="button" onclick="openCity(event, 'London')">Value Range Result</button>
    <button class="tablinks" type="button" onclick="openCity(event, 'Paris')">Fixed Test Result</button>
  </div>
  <div id="London" class="tabcontent" style="display:block">
    <input type="text" name="maleage" id="maleage" required> <br>
    <input type="text" name="maleedu" id="maleedu" required> <br>
  </div>
  <div id="Paris" class="tabcontent">
    <input type="text" name="femage" id="femage" required> <br>
    <input type="text" name="femedu" id="femedu" required> <br> 
  </div>
  <input type="submit" name="submit" id="submit" value="Submit"> 
</form>

JavaScript代码

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    // 切换标签时恢复所有字段的可用状态与必填验证
    const inputs = tabcontent[i].querySelectorAll('input');
    inputs.forEach(input => {
      input.disabled = false;
      input.required = true;
    });
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// 监听表单提交事件，处理未激活标签页字段
document.getElementById('mainForm').addEventListener('submit', function() {
  const inactiveTabs = document.querySelectorAll('.tabcontent:not([style*="display:block"])');
  inactiveTabs.forEach(tab => {
    const inputs = tab.querySelectorAll('input');
    inputs.forEach(input => {
      input.disabled = true;
      input.required = false;
    });
  });
});

核心逻辑说明 #

• 标签切换恢复状态：切换Tab时，将之前禁用的字段恢复为可用状态，并重新开启必填验证，确保用户切换回标签页时能正常填写。
• 提交时处理未激活字段：提交表单前，禁用未激活标签页的所有输入框，浏览器会自动忽略这些字段的提交与验证。
• 初始状态配置：默认激活第一个标签页，给对应按钮添加active类，标签内容设置display:block，符合常规交互逻辑。

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