我来这里是为了回答，我自己触发了这个问题，基于没有关闭</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'的无效表单控件不可聚焦。

我也是带着同样的问题来的。对我来说(在需要的时候注入隐藏元素——比如在工作应用程序中接受教育)有必要的标志。

我意识到，验证器对注入文件的启动速度比文档准备好还要快，因此它会报错。

我最初的ng-required标记使用可见性标记(vm.flags.hasHighSchool)。

我通过创建一个专用标志来设置required来解决这个问题 ng-required = " vm.flags。highSchoolRequired == true"

我添加了一个10ms的回调设置标志，问题解决了。

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

<input type="submit" name="btnSave" value="Update" id="btnSave" formnovalidate="formnovalidate">

formnovalidate=“formnovalidate”

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

另一个可能的原因，并没有涵盖在所有前面的答案，当你有一个正常的表单与必填字段，你提交了表单，然后隐藏它直接提交(javascript)没有时间验证功能的工作。

验证功能将尝试集中在必需的字段上并显示错误验证消息，但该字段已被隐藏，因此出现“name= " is not focusable."的无效表单控件!

编辑:

要处理这种情况，只需在提交处理程序中添加以下条件

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

编辑:解释

假设在提交表单时隐藏表单，这段代码保证表单/字段在表单生效之前不会被隐藏。因此，如果一个字段无效，浏览器可以将焦点集中在它上，因为该字段仍然显示。

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

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

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

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

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