jquery - 使用 jQuery 选项卡的谷歌浏览器 "An invalid form control is not focusable"

Question

我创建了一个使用 jQuery 分成许多“选项卡”的表单；以及在各个选项卡中找到的字段。

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

但是，当我尝试提交字段中包含无效值的表单时，如果这些字段位于与当前不同的选项卡下，我会在 Google Chrome 的控制台上收到错误消息:

An invalid form control is not focusable

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

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

• An invalid form control with name='' is not focusable
• "Invalid form control" only in Google Chrome
• An invalid form control with name='' is not focusable. WITHOUT ANY REQUIRED OR HIDDEN INPUTS

但是，他们都说要为字段提供正确的名称(已经完成)或删除“必需的属性”(不能这样做，这是有原因的!)。

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

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

编辑:

Here您可以找到我所描述内容的示例，即使它比实际表单简单得多，但如果您在 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

这看起来有点像 Vilriana 的回答:

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