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

Pass HTML5-Validation-Event in hidden Tab to JavaScript-Function

本文关键字：事件 函数 JavaScript 验证 HTML5 选项 隐藏      更新时间：2023-09-26

的设置

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

形势

  • 用户具有活动的选项卡编号2
  • 。。。和火灾"提交"
  • 假设选项卡1上存在HTML5验证错误

问题

  • HTML5验证未显示（因为用户的选项卡2处于活动状态，错误显示在选项卡1上）
  • 用户必须手动切换到选项卡1才能看到错误

问题

  • 在这种情况下，我如何自动切换到选项卡编号1
  • 有简单的解决方案吗？（也许会以某种方式将HTML5验证事件传递给JavaScript？）

如果有人能在这里帮我，我会很高兴的。创意非常受欢迎。事先非常感谢。

我思考了整个问题，并得出了以下结论：

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

我是如何解决的（更详细）：

1.）将提交按钮"降级"为"普通旧"按钮

2.）在该按钮上添加了一个onclick事件，该事件会触发"submitTabs（）"-函数

3.）自定义功能

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

现在，每当我提交表单时，选项卡1就会激活并显示出来。当出现HTML5验证错误时，将显示这些错误。如果没有错误，选项卡会在一两秒钟内处于活动状态，表单将被提交并重定向到另一个页面。

相关文章：