以防其他人有这个问题，我也经历过同样的事情。正如评论中所讨论的，这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上，但是因为它们被设置为display:none;，所以它不能。因此出现了错误。

我可以用类似的方法来解决这个问题:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

此外，这可能是重复的“无效的窗体控件”只有在谷歌Chrome

这是因为表单中有一个带有required属性的隐藏输入。

在我的情况下，我有一个选择框，它是隐藏的jquery tokenizer使用内联风格。如果我没有选择任何令牌，浏览器在表单提交时抛出上述错误。

所以，我用下面的css技术修复了它:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

对我来说，问题是在div中输入类型电子邮件的可见性:隐藏，类似这样的东西

<form>
  <div style="visibility: hidden;">
  <input type="email" name="email" id="email">
  ............
</form>

然后你可以改变type="email"为type="text"或删除可见性:隐藏;

它可以是你有隐藏(display: none)字段和必需的属性。

请检查所有必填字段是否对用户可见:)

我在使用Angular JS时也发现了同样的问题。这是由于与ng-hide一起使用required引起的。当我点击提交按钮，而这个元素是隐藏的，然后发生错误，无效的窗体控件与名称= "是不可聚焦的。终于!

例如，将ng-hide和required一起使用:

<input type="text" ng-hide="for some condition" required something >

我通过用ng-pattern代替所需的来解决它。

例如解决方案:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

对于Angular来说:

ng-required =“布尔”

如果值为true，这将只应用html5 'required'属性。

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />