如何跳转到含空必填字段的标签页

  

    
    
    ...
  
  

    
    
    ...
  

2. JavaScript：监听 invalid 事件并定位 Tab

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

// 捕获阶段监听 invalid 事件（关键！）
form.addEventListener('invalid', function(e) {
  e.preventDefault(); // 阻止浏览器默认弹窗和聚焦失败
  e.target.classList.add('is-invalid'); // 样式反馈

  // 获取所属 fieldset
  const fieldset = e.target.closest('fieldset');
  if (!fieldset) return;

  // 记录失效 Tab 名称（支持多字段）
  const invalidTabs = new Set(form.dataset.invalidTabs?.split(' ') || []);
  invalidTabs.add(fieldset.name);
  form.dataset.invalidTabs = [...invalidTabs].join(' ');

  // 自动切换到首个失效 Tab
  const tabLink = document.querySelector(`.tab-registers a[href="#${fieldset.name}"]`);
  if (tabLink && !tabLink.classList.contains('active-tab')) {
    tabLink.click(); // 触发你原有的 tab 切换逻辑
  }
}, true); // true → 捕获阶段

// 输入时清理状态（可选增强体验）
form.addEventListener('input', function(e) {
  const fieldset = e.target.closest('fieldset');
  if (e.target.validity.valid && fieldset?.validity.valid) {
    const invalidTabs = new Set(form.dataset.invalidTabs?.split(' ') || []);
    invalidTabs.delete(fieldset.name);
    form.dataset.invalidTabs = [...invalidTabs].join(' ');
  }
});

3. CSS：视觉反馈强化

/* 失效 Tab 导航项高亮 */
form[data-invalid-tabs~="adr_factur"] .tab-registers a[href="#adr_factur"],
form[data-invalid-tabs~="adr_comm"] .tab-registers a[href="#adr_comm"] {
  background-color: #ffebee;
  color: #c62828;
  font-weight: bold;
}

/* 失效输入框边框 */
input.is-invalid,
select.is-invalid {
  border: 2px solid #f44336;
}

4. 注意事项与最佳实践

• ✅ 必须使用 true（捕获阶段）监听 invalid：否则事件在冒泡阶段才触发，此时浏览器已尝试聚焦隐藏元素并报错。
• ✅ 避免 required 与 display:none 共存：隐藏 Tab 中的 required 字段会持续参与校验。解决方案是：
  • 使用 fieldset[disabled]（但需同步禁用内部控件）；
  • 或在切换 Tab 时动态移除/添加 required 属性（推荐）：

    function activateTab(tabName) {
      document.querySelectorAll('fieldset').forEach(fs => fs.classList.remove('current'));
      document.querySelector(`fieldset[name="${tabName}"]`).classList.add('current');
      // 启用当前 Tab 的 required，禁用其他
      document.querySelectorAll('fieldset').forEach(fs => {
        const reqs = fs.querySelectorAll('[required]');
        reqs.forEach(el => el.required = fs.classList.contains('current'));
      });
    }

• ⚠️ jQuery 与原生混合需谨慎：你原代码混用 jQuery 和原生 DOM 操作，易引发兼容性问题。建议统一为原生（如上例），或确保 jQuery 版本支持现代选择器。

该方案彻底规避了手动索引匹配的脆弱性，利用浏览器原生校验能力，实现精准、可扩展的 Tab 定位，同时保持代码简洁与可维护性。

以上就是《如何跳转到含空必填字段的标签页》的详细内容，更多关于的资料请关注golang学习网公众号！