将隐藏选项卡中的 HTML5-Validation-Event 传递给 JavaScript-Function答案

【问题标题】：Pass HTML5-Validation-Event in hidden Tab to JavaScript-Function将隐藏选项卡中的 HTML5-Validation-Event 传递给 JavaScript-Function
【发布时间】：2013-08-17 00:48:04
【问题描述】：

设置

带有 2 个标签的 HTML 页面（使用 Bootstrap Tabbable nav 构建）
两个标签都被一个表单标签包围
有一个提交按钮，该按钮始终显示，与当前处于活动状态的选项卡无关
只有标签 1 包含表单域（表单域具有 HTML5“必需”属性）

情况

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

问题

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

问题

在这种情况下如何自动切换到标签号 1？
有简单的解决方案吗？（也许以某种方式将 HTML5-Validation-Event 传递给 JavaScript？）

如果有人可以在这里帮助我，我会非常高兴。非常欢迎有创意的想法。非常感谢您。

【问题讨论】：

stackoverflow.com/questions/7946714/… 的可能重复项 form 元素引发了一个 invalid 事件。至于其他问题，我需要查看更多代码才能给出答案。
@Mike：谢谢你的评论！我已经用一种新的思维方式解决了这个问题……

标签： javascript html validation

【解决方案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 错误时，它们将被显示。如果没有错误，选项卡会激活一两秒钟，表单正在提交并重定向到不同的页面。

【讨论】：