如果您在复选框输入上得到错误，则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认并替换为一些其他样式，这也将触发不可聚焦错误在Chrome验证错误。

我发现这在我的样式表:

input[type="checkbox"] {
    visibility: hidden;
}

简单的解决方法是用这个替换它:

input[type="checkbox"] {
    opacity: 0;
}

有些事情仍然让我感到惊讶……我有一个具有两个不同实体的动态行为的表单。一个实体需要一些其他实体不需要的字段。 所以，我的JS代码，取决于实体，做一些类似的事情: $ (' # periodo ') .removeAttr(“需要”); $ (" # periodo-container ") hide ();

当用户选择另一个实体时: $ (" # periodo-container "),告诉(); $ (" # periodo”)。道具(“需要”,真正的);

但有时，当提交表单时，会出现问题:“name=periodo的无效表单控件”不可聚焦(我对id和名称使用相同的值)。

要解决这个问题，您必须确保您正在设置或删除'required'的输入始终可见。

所以，我所做的是:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

这解决了我的问题…难以置信。

我希望在这个冗长的答案种子中没有遗漏我的场景是一些非常奇怪的事情。

我有div元素，动态更新通过对话框被调用在他们加载和得到行动。

简而言之，div id有

<div id="name${instance.username}"/>

我有一个用户:测试帐户，出于某种原因，编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。

缩小到这个范围，重新测试使用数字代替，即id似乎解决了这个问题。

不仅仅是在其他答案中提到的必填项。这也是由于将<input>字段放置在隐藏的<div>中导致的，该字段持有无效值。

考虑下面的例子，

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div> 

这将抛出相同的错误。所以确保<input>字段隐藏<div>不持有任何无效值。

以防其他人有这个问题，我也经历过同样的事情。正如评论中所讨论的，这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上，但是因为它们被设置为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

这个问题发生在Chrome上，如果一个表单字段验证失败，但由于各自的无效控件无法聚焦，浏览器试图显示消息“请填写此字段”旁边也失败了。

由于多种原因，表单控件在触发验证时可能无法聚焦。下面描述的两种情况是最突出的原因:

The field is irrelevant according to the current context of the business logic. In such a scenario, the respective control should be disabled or removed from the DOM or not be marked with the required attribute at that point. Premature validation may occur due to a user pressing ENTER key on an input. Or a user clicking on a button/input control in the form which has not defined the type attribute of the control correctly. If the type attribute of a button is not set to button, Chrome (or any other browser for that matter) performs a validation each time the button is clicked because submit is the default value of a button's type attribute.

为了解决这个问题，如果你的页面上有一个按钮是做其他事情而不是提交或重置，请记住这样做:<button type="button">。