或者另一个万无一失的答案是使用HTML5占位符属性，那么就不需要使用任何js验证。

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome将无法找到任何空的，隐藏的和需要关注的元素。简单的解决方案。

希望这能有所帮助。我完全接受这个解决方案。

我经常看到有人问这个问题，我自己也遇到过这个“错误”。甚至有链接质疑这是否是Chrome的一个真正的错误。 这是当一个或多个表单输入类型元素被隐藏并且这些元素具有最小/最大限制(或其他一些验证限制)时发生的响应。

在创建表单时，元素没有赋值，之后元素值可能会被填充或保持不变。 在提交时，表单将被解析，任何超出这些验证限制的隐藏元素将向控制台抛出这个“错误”，提交将失败。因为您不能访问这些元素(因为它们是隐藏的)，所以这是唯一有效的响应。

这不是一个实际的错误或错误。这表示有一些即将提交的元素值超出了一个或多个元素规定的限制。

为了解决这个问题，在表单提交之前的任何时候，为隐藏在表单中的任何元素分配一个有效的默认值，那么这些“错误”将永远不会发生。它本身并不是一个bug，它只是迫使您养成更好的编程习惯。

注意:如果您希望将这些值设置为验证限制之外的值，请使用form。addEventListener('submit'， myFunction)来拦截'submit'事件，并在"myFunction"中填充这些元素。似乎验证检查是在“myFunction()”被调用之前执行的。

在我的情况下，问题是输入类型="radio"需要隐藏:

可见性:隐藏;

此错误消息还将显示所需的输入类型单选或复选框是否有显示:none;CSS属性。

如果你想创建自定义的单选/复选框输入，它们必须从UI中隐藏，并且仍然保持所需的属性，你应该使用:

透明度:0;CSS属性

使用ElementInternals API的自定义元素元素不能使用delegatesFocus: true与shadowRoot，因为元素必须直接接收焦点(目前，这可能会发展)在公开的表单的DOM树(父表单可以在shadowRoot，它只是必须在同一部分的树与自定义和其他表单元素);元素必须是可见的，在我的实验中tabindex=0是必需的元素(-1似乎也工作)

一个从googlchrome扩展的带有自定义元素的演示在https://jimmont.github.io/samples/report-validity/

the error is simply reporting that an element which has attributes indicating it needs validation cannot receive focus when there's a problem with the validation, so the user can correct the error; if the error and information is coming in as expected you can ignore the error; otherwise it's likely the result of some UI features hiding elements and a mix of unexpected behavior; it's possible to use another approach in implementations to allow the user to walk back through a flow of some sort, but it appears that's beyond the scope of the question at the moment

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