Google chrome使用jQuery选项卡“无效表单控件不可聚焦”

Question

我已经创建了一个表单，它使用jQuery被拆分为许多“选项卡”；以及在各个选项卡中找到的字段。

表单中的所有字段都有相应的检查，有些字段是必需的，有些字段必须具有最小值，等等。

但是，当我尝试提交一个在字段中包含无效值的表单时，如果这些字段位于不同于当前选项卡的选项卡下，我会在控制台上从GoogleChrome得到一个错误：

无效的表单控件不可聚焦

但用户看不到任何效果，也找不到错误的字段，因为浏览器未突出显示该字段。

我已经阅读了以下问题的答案：

• 名称为“”的无效表单控件不可聚焦
• “无效表单控件”仅在Google Chrome中出现
• 名称为“”的无效表单控件不可聚焦。没有任何必需或隐藏的输入

但是，他们都说要给字段指定正确的名称（已经完成），或者删除“必需属性”（不能这样做，这是有原因的！）。

我想强调的是，我也在做服务器端验证，所以这不是这个问题的主题。

如何在表单中保留HTML5验证，同时避免该错误？

编辑：

在这里，您可以找到我所描述的示例，即使它比实际表单简单得多，如果您将其加载到GoogleChrome并立即提交表单，您将在控制台中看到错误。

<form id="form_tabs" name="form_tabs" method="post" action="">
  <div id="tabs" class="ui-tabs">
    <ul>
      <li><a rel="tabs" href="#tab1">FIRST TAB</a></li>
      <li><a rel="tabs" href="#tab2">SECOND TAB</a></li>
    </ul>

    <div id="tab1" class="ui-tabs-hide">
      <input type="text" name="text1" id="text1" value="" placeholder="I am NOT required"/>
    </div>

    <div id="tab2" class="ui-tabs-hide">
      <input type="text" name="text2" id="text2" value="" placeholder="I REALLY am required!" required="required"/>
    </div>
  </div>

  <br/>
  <button type="submit" value="submit">
    SEND FORM
  </button>
</form>

Answer 1

我也遇到了同样的问题，用同样的方法解决了

$("form input").on("invalid", function() {
    $(this).parents('.parentdiv').find('.div').show()
});

这将弹出带有无效数据的div并显示消息

Answer 2

浏览器不知道如何显示具有无效控件的选项卡。所以你需要手动处理。

document.querySelector('#form_tabs').addEventListener('invalid', function(event) {
    // Check event.target, and show its owner tab.  e.g.
    event.target.parentNode.classList.remove('ui-tabs-hide');
}, true);

Answer 3

这似乎有点像Villiana的回答：

//when submitted if there was an issue
 $("form input").on("invalid", function() {
        //find tab id           
        var element = $(this).closest('.ui-tabs-panel').index();
         //goto tab id
        $('#yourTabs').tabs('option', 'active', element)
 });