如何定位空必填Tab并跳转？

  

    
...
  
  

    
...
  
  

    
...
  

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);
}

⚠️ 注意事项

• 不要使用 novalidate 临时禁用验证：它绕过浏览器校验逻辑，导致 invalid 事件不触发，且无法解决“不可聚焦”报错。
• 避免 for...in 遍历数组：divs 是数组，应使用 for...of 或 forEach；for...in 遍历的是属性名（可能含原型方法），极易引发索引错乱。
• 确保每个 Tab 的 id 与 href 值严格一致：例如 对应
  ，否则 tabLink.click() 无效。
• required 字段必须有 name 属性：否则 invalid 事件不会触发（HTML 规范要求）。

该方案完全兼容你现有的 Bootstrap 样式结构，无需重构 HTML 主干，仅通过语义化