如何定位并跳转到包含空必填字段的 Tab 页-js教程-PHP中文网

如何定位并跳转到包含空必填字段的 Tab 页

当表单存在多 Tab 结构且各 Tab 含 required 字段时，提交前需自动检测首个含未填写必填项的 Tab 并切换过去；本文提供健壮的 DOM 遍历逻辑、事件驱动验证方案及可维护的 CSS 样式控制。

当表单存在多 tab 结构且各 tab 含 `required` 字段时，提交前需自动检测首个含未填写必填项的 tab 并切换过去；本文提供健壮的 dom 遍历逻辑、事件驱动验证方案及可维护的 css 样式控制。

在多 Tab 表单中实现“提交时自动跳转至首个含空必填字段的 Tab”，是前端表单体验的关键一环。你当前的代码存在两个核心问题：divs 数组存储的是 href 字符串（如 "#block_add_client_adr_factur"），但循环中却用 for...in 遍历其索引，并直接用该索引访问 tabs[onglet] —— 这会导致逻辑错位；更根本的是，原生 HTML 表单验证会阻止提交并抛出 invalid form control is not focusable 错误，而你的 novalidate 临时移除策略无法规避浏览器对隐藏 Tab 中 required 元素的聚焦检查。

✅ 正确解法：基于 invalid 事件 + fieldset 分组 + data-feedback 驱动

我们不依赖手动遍历所有 Tab 的 required 字段，而是利用浏览器原生的 invalid 事件机制，在用户触发提交或输入失焦时捕获无效字段，并动态标记关联 Tab：

1. 结构优化：用

明确语义分组

将每个 Tab 内容包裹为独立

，便于通过 DOM 层级快速定位所属 Tab：

<div class="tab-bodies">
  <fieldset name="tab-adr-comm" class="current">
<div id="block_add_client_adr_comm">...</div>
  </fieldset>
<fieldset name="tab-adr-factur">
<div id="block_add_client_adr_factur">...</div>
  </fieldset>
<fieldset name="tab-facturation">
<div id="block_add_client_facturation">...</div>
  </fieldset>
</div>

2. 关键 JavaScript：监听 invalid 与 input 事件

const form = document.getElementById('frmClient');

// 捕获任意 required 字段校验失败，标记对应 fieldset
form.addEventListener('invalid', (e) => {
  e.preventDefault(); // 阻止默认弹窗 & 聚焦失败报错
  e.target.classList.add('invalid');

  const fieldset = e.target.closest('fieldset');
  if (fieldset && fieldset.name) {
    const feedback = new Set(form.dataset.feedback?.split(' ') || []);
    feedback.add(fieldset.name);
    form.dataset.feedback = [...feedback].join(' ');

    // 自动切换到首个无效 Tab（可选：仅首次）
    if (!form.hasAttribute('data-tab-switched')) {
      const tabLink = document.querySelector(`.tab-registers a[href="#${fieldset.id}"]`);
      if (tabLink) {
        tabLink.click();
        form.setAttribute('data-tab-switched', 'true');
      }
    }
  }
}, true); // useCapture 确保捕获阶段触发

// 输入恢复有效时，清理标记
form.addEventListener('input', (e) => {
  const fieldset = e.target.closest('fieldset');
  if (e.target.validity.valid && fieldset?.name) {
    e.target.classList.remove('invalid');
    if (Array.from(fieldset.querySelectorAll('[required]')).every(el => el.validity.valid)) {
      const feedback = new Set(form.dataset.feedback?.split(' ') || []);
      feedback.delete(fieldset.name);
      form.dataset.feedback = [...feedback].join(' ');
    }
  }
});

// 提交前重置状态（防止重复标记）
form.addEventListener('submit', () => {
  form.removeAttribute('data-tab-switched');
});

3. Tab 切换逻辑（精简可靠版）

document.querySelectorAll('.tab-registers a').forEach(tabLink => {
  tabLink.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href').substring(1); // #id → id

    // 移除所有 active 状态
    document.querySelectorAll('.tab-registers .nav-link').forEach(el => 
      el.classList.remove('active-tab')
    );
    this.classList.add('active-tab');

    // 显示目标 fieldset，隐藏其他
    document.querySelectorAll('.tab-bodies fieldset').forEach(fs => {
      fs.classList.toggle('current', fs.id === targetId);
      fs.style.display = fs.id === targetId ? 'block' : 'none';
    });
  });
});

4. CSS 辅助：视觉反馈无效 Tab

/* 使无效 Tab 在导航栏高亮 */
form[data-feedback~="tab-adr-factur"] .tab-registers a[href="#block_add_client_adr_factur"],
form[data-feedback~="tab-facturation"] .tab-registers a[href="#block_add_client_facturation"] {
  background-color: #ffebee;
  color: #c62828;
  font-weight: bold;
}

/* 无效输入框红边 */
input.invalid, select.invalid, textarea.invalid {
  border: 2px solid #f44336 !important;
  box-shadow: 0 0 4px rgba(244, 67, 54, 0.3);
}