3

设置

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

情况

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

问题

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

问题

  • 在这种情况下，我怎样才能设法自动切换到标签号 1？
  • 有简单的解决方案吗？（也许以某种方式将 HTML5-Validation-Event 传递给 JavaScript？）

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

4

1 回答 1

0

我考虑了整个问题，并想出了这个：

  • 如果会抛出验证错误，那么它们必须在选项卡 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 错误时，它们将被显示。如果没有错误，选项卡会激活一两秒钟，表单正在提交并重定向到不同的页面。

于 2013-08-17T23:40:13.297 回答