谷歌浏览器"An invalid form control is not focusable"使用jQuery Tabs

Question

我创建了一个表单，它使用jQuery被分成许多"选项卡";以及在各个选项卡中找到的字段。

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

但是，当我尝试提交字段中具有无效值的表单时，如果这些字段位于与当前选项卡不同的选项卡下，则我在控制台上收到来自谷歌浏览器的错误：

无效的表单控件无法聚焦

但是用户看不到任何效果，他/她也无法找到错误的字段，因为它没有被浏览器突出显示。

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

• 名称='' 的无效窗体控件不可聚焦
• "无效的表单控件"仅在谷歌浏览器中
• 名称='' 的无效窗体控件不可聚焦。没有任何必需或隐藏的输入

但是，他们都说要为字段指定正确的名称（已经完成）或删除"必需属性"（不能这样做，它的存在是有原因的！

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

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

编辑：

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

<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

这

似乎有点像维尔里亚纳的回答：

//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)
 });

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

我遇到了同样的问题并用

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

这将弹出包含无效数据的div 并显示消息