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

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

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

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

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

在表单中添加novalidate属性将有助于:

<form name="myform" novalidate>

我来这里是为了回答，我自己触发了这个问题，基于没有关闭</form>标签，并且在同一页面上有多个表单。第一个表单将扩展到包括对来自其他地方的表单输入进行验证。因为这些表单是隐藏的，所以它们触发了错误。

例如:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

触发器

name='userId'的无效表单控件不可聚焦。 name='password'的无效表单控件不可聚焦。 name='confirm'的无效表单控件不可聚焦。

当你向输入字段提供style="display: none;"和required属性时，这个问题就会发生，并且在提交时会进行验证。 例如:

<input type="text" name="name" id="name" style="display: none;" required>

这个问题可以通过从HTML的输入字段中删除所需的属性来解决。如果需要添加所需属性，请动态添加。如果你正在使用JQuery，请使用下面的代码:

$("input").prop('required',true);

如果需要动态删除该字段，

$("input").prop('required',false);

如果你不使用JQuery，你也可以使用纯Javascript:

document.getElementById('element_id').removeAttribute('required');

这个问题发生在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">。

奇怪的是，每个人都建议删除验证，而验证的存在是有原因的…… 不管怎样，如果你在使用一个自定义控件，并且想要维护验证，你可以这样做:

第一步。从输入中删除无显示，因此输入变得可聚焦

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

第二步骤。如果样式不够，则在特定情况下的输入上添加无效事件处理程序

inputEl.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
});