多标签页表单必填项校验：用jQuery定位错误标签与输入框

完全可以实现这个需求！我帮你调整代码，不仅能定位到未填写的标签页和输入框，还能给用户清晰的提示，具体方案如下：

核心思路 #

点击提交按钮时，先拦截默认的表单提交行为，手动检查所有标签页内的必填字段。找到无效字段后，自动切换到对应标签页、聚焦到未填字段，最后弹出提示告知用户问题所在。

完整代码实现 #

假设你的标签页是基于Bootstrap的常见结构（如果是自定义标签页，只需微调切换逻辑即可）：

$('#btt_salva').click(function (e) {
    // 先阻止默认提交，避免HTML5默认校验先触发
    e.preventDefault();
    
    // 捕获所有未通过校验的表单控件（包含input/select/textarea）
    const invalidElements = $('input:invalid, select:invalid, textarea:invalid');
    
    if (invalidElements.length > 0) {
        // 优先处理第一个无效字段（也可循环处理多个）
        const firstInvalid = invalidElements.first();
        
        // 定位该字段所在的标签页容器
        const targetTabPane = firstInvalid.closest('.tab-pane');
        if (targetTabPane.length) {
            // 找到对应标签页的切换按钮
            const tabId = targetTabPane.attr('id');
            const tabTrigger = $(`[data-bs-target="#${tabId}"], [href="#${tabId}"]`);
            
            // 切换到目标标签页
            tabTrigger.tab('show');
            
            // 聚焦到未填写的字段，让用户直观看到问题
            firstInvalid.focus();
        }
        
        // 弹出个性化提示，用字段的标签或占位符说明问题
        const fieldName = firstInvalid.prev('label').text() || firstInvalid.attr('placeholder') || '必填字段';
        alert(`请完成填写：${fieldName}`);
    } else {
        // 所有字段校验通过，正常提交表单
        $('form').submit();
    }
});

关键细节说明 #

• 拦截默认提交：用e.preventDefault()避免HTML5自带的校验弹窗先弹出，保证我们的自定义逻辑优先执行
• 全局校验：input:invalid会匹配所有加了required属性但未填写的控件，不管它在哪个标签页
• 标签页定位：通过closest('.tab-pane')找到字段所在的标签页容器，再匹配对应的切换按钮，调用tab('show')完成切换（Bootstrap标签页的原生方法）
• 用户友好提示：通过字段的标签文本或占位符生成提示，比单纯的“必填”更清晰

自定义标签页适配 #

如果你的标签页不是Bootstrap结构，只需替换标签页切换的逻辑即可，示例：

// 假设标签按钮有类名.tab-btn，对应标签页有类名.tab-content
tabTrigger.addClass('active');
$('.tab-content').removeClass('active');
targetTabPane.addClass('active');

内容的提问来源于stack exchange，提问作者Jordan.M