Question

我创建了一个分为多个＆＃34;标签＆＃34;使用jQuery;以及各种标签中的字段。

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

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

无效的表单控件无法调焦

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

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

但是，他们都说要为字段（已经完成）提供正确的名称或者删除＆＃34; required属性＆＃34; （不能这样做，它有一个原因！）。

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

如何在表单中保留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)
 });

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并显示消息

谷歌浏览器＆＃34;无效的表单控件无法集中精力＆＃34;使用jQuery选项卡

3 个答案: