本文介绍在多标签表单中，当用户提交时存在未填写的 required 字段，如何自动识别其所在 Tab 并切换显示，避免浏览器原生 invalid form control is not focusable 报错，同时提升用户体验。
本文介绍在多标签表单中，当用户提交时存在未填写的 required 字段，如何自动识别其所在 tab 并切换显示，避免浏览器原生 `invalid form control is not focusable` 报错，同时提升用户体验。
在构建带 Tab 导航的模态表单（如客户信息录入）时，一个常见痛点是：多个 Tab 中分布着 required 字段，但浏览器默认校验会因隐藏 Tab 中的不可见必填项而抛出 invalid form control ... is not focusable 错误，并阻止表单提交。你当前的 JavaScript 逻辑试图遍历所有 Tab 对应的 DOM 元素（如 #block_add_client_adr_factur），筛选其中为空的 required 字段，再触发对应 Tab 的点击事件来激活——但实际运行中却错误地总跳转到第一个 Tab（索引 0），即使问题字段位于第二个 Tab。
根本原因在于你代码中的关键缺陷：
for(let i in divs) {
let obligatoiresVide = $(divs[i]+" input,textarea,select").filter('[required]').filter(function(idx) {
return $(this).val() == "";
});
if (obligatoiresVide.length > 0) {
videExist = true;
onglet = i; // ❌ 错误：i 是字符串索引（如 "0", "1"），但 tabs[i] 无法正确映射
break;
}
}divs 是由 el.getAttribute("href") 收集的字符串数组（例如 ["#block_add_client_adr_comm", "#block_add_client_adr_factur"]），而 tabs 是通过 Array.from(registers.children) 构建的 DOM 元素数组。二者索引顺序虽一致，但 i 是 for...in 循环产生的字符串键（非数字），且 tabs[i] 在严格模式或现代环境可能为 undefined；更严重的是，divs[i] 实际上是 divs["0"]、divs["1"] —— 这看似可行，但一旦 divs 被意外修改或存在非数字键，逻辑即崩溃。此外，$(divs[i] + " input,textarea,select") 会匹配所有 Tab 内的元素（包括隐藏的），而 jQuery .val() 对隐藏 <select> 或 <input> 在某些浏览器中可能返回空字符串或 undefined，导致误判。
✅ 正确解法不是“手动遍历 + 模拟点击”，而是利用 HTML5 表单原生事件机制，结合语义化结构与事件委托，实现健壮、可维护的 Tab 定位逻辑。
推荐方案：基于 invalid 事件的声明式 Tab 管理
核心思想：放弃手动扫描 DOM，转而监听表单的 invalid 事件（捕获阶段），自动标记失效字段及其所属 Tab，并动态高亮对应导航项。
1. 结构优化：用 <fieldset> 语义化分组 Tab 内容
将每个 Tab 区域包裹为 <fieldset name="tab-key">，并赋予唯一 name（如 "adr_comm"、"adr_factur"），替代原生 div#id 控制显隐：
<div class="modal-body">
<fieldset name="adr_comm" class="tab-pane current">
<!-- 地址商业 Tab 所有字段 -->
<input type="text" name="nom" required>
<select name="nationalite" required>...</select>
</fieldset>
<fieldset name="adr_factur" class="tab-pane">
<!-- 地址开票 Tab 所有字段 -->
<input type="text" name="nomFacturation" required>
<select name="paysFacturation" required>...</select>
</fieldset>
</div>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 定位，同时保持代码简洁与可维护性。
