javascript - 将隐藏选项卡中的 HTML5 验证事件传递给 JavaScript 函数

Question

设置

• 带有 2 个标签的 HTML 页面(使用 Bootstrap Tabbable nav 构建)
• 两个选项卡都被恰好一个表单标签包围
• 有一个提交按钮，它会不断显示，与当前处于事件状态的选项卡无关
• 只有标签 1 包含表单字段(表单字段具有 HTML5“必需”属性)

情况

• 用户标签号 2 处于事件状态...
• ...并触发“提交”
• 假设，标签 1 上存在 HTML5 验证错误

问题

• 未显示 HTML5 验证(因为用户激活了选项卡 2，错误显示在选项卡 1 上)
• 用户必须手动切换到选项卡 1 才能看到错误

问题

• 在这种情况下，我如何设法自动切换到第 1 个标签页？
• 有简单的解决方案吗？ (也许以某种方式将 HTML5-Validation-Event 传递给 JavaScript？)

如果有人能帮助我，我会很高兴。非常欢迎有创意的想法。非常感谢您。

Answer 1

我考虑了整个问题，得出了这个结论:

• 如果会抛出验证错误，那么它们必须在选项卡 1 上。换句话说:验证错误只能出现在选项卡 1 中。
• 所以我决定编写自己的提交函数!

我是如何解决的(更详细):

1.) 将提交按钮“降级”为“普通旧”按钮

2.) 在那个按钮上添加了一个 onclick 事件，它触发了“submitTabs()”-Function

3.) 自定义函数

function submitTabs()
{
    // always get tab 1 to front
    $('a[href=#tab_with_fields]').tab('show');

    // submit form manually
    $('form:first').submit();
}

现在，每当我提交表单时，选项卡 1 都会激活并显示。当存在 HTML5-Validation 错误时，它们将被显示。如果没有错误，选项卡会激活一两秒钟，表单正在提交并重定向到另一个页面。