使用 jQuery 选项卡的谷歌浏览器“无效的表单控件不可聚焦”

Posted 2023-02-22

【中文标题】使用 jQuery 选项卡的谷歌浏览器“无效的表单控件不可聚焦”

【英文标题】：Google chrome "An invalid form control is not focusable" using jQuery Tabs

【发布时间】：2016-11-20 21:35:42

【问题描述】：

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

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

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

无效的表单控件不可聚焦

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

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

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>

【问题讨论】：

我也在尝试创建一个小提琴来展示这个问题。

因为您正在使用标签，您会收到此错误。当前不可见的选项卡设置为display:none - 浏览器无法将表单字段集中在这样的隐藏选项卡内。 // 如果你想使用标签，那么你可能应该用 JS 分别对每个标签进行验证，否则我会说这是相当糟糕的 UX。

我知道它发生的原因，但如果可能的话，我想保留当前的 ​​UI 和 html5 检查，只是“拦截”错误并显示正确的选项卡。

要“拦截”它，我认为您必须自己检查表单的有效性（HTML5 提供了方法），然后确保第一个相关元素可见（通过激活它的选项卡已开启。）

我会对此进行调查，感谢您的提醒！

【参考方案1】：

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

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

【参考方案2】：

我遇到了同样的问题，用

解决了

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

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

【参考方案3】：

这似乎有点像 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)
 );

【讨论】：

这与我最终做的类似