我发生此错误是因为我提交的表单中未填写必填字段。

产生该错误的原因是，浏览器试图将焦点放在必填字段上，以警告用户必填字段，但这些必填字段隐藏在display div中，因此浏览器无法专注于它们。我是从可见选项卡提交的，必填字段位于隐藏的选项卡中，因此出现错误。

要解决此问题，请确保您控制了必填字段。

我想在这里回答，因为这些回答或任何其他Google结果都没有为我解决问题。

对我而言，它与字段集或隐藏的输入无关。

我发现如果使用max="5"（例如）它将产生此错误。如果我用过maxlength="5" ...没有错误。

我能够重现错误并清除错误多次。

我仍然不知道为什么使用该代码会产生错误，就此而言，即使我认为没有“最小”值，它也应该是有效的。

确保表单中所有具有必需属性的控件也都设置了name属性

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

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

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

希望能有所帮助。我对这种解决方案完全满意。

让我说一下我的情况，因为它与上述所有解决方案都不相同。我有一个HTML标记未正确关闭。该元素不是 required，但它嵌入在hiddendiv中

在我的情况下，问题出在type="datetime-local"，出于某种原因在提交表单时对其进行了验证。

我改变了这个

<input type="datetime-local" />

进入那个

<input type="text" />

我来这里时遇到了同样的问题。对我来说（根据需要注入隐藏元素-即在工作应用中接受教育）具有必需的标志。

我意识到验证器对注入文件的触发速度比文件准备就绪的速度快，因此它抱怨。

我最初的ng-required标签是使用可见性标签（vm.flags.hasHighSchool）。

我通过创建专用标志来解决，以设置所需的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>

对于在那里的其他AngularJS 1.x用户，出现此错误是因为我不需要显示控件，而不是将其完全从DOM中删除，而不显示了该控件。

我通过在包含需要验证的表单控件的div上使用/ ng-if而不是ng-show/ 来解决此问题ng-hide。

希望这对您的边缘案例用户有所帮助。

使用Angular JS时我发现了同样的问题。这是从使用造成需要加上NG-隐藏。当我在隐藏该元素的情况下单击“提交”按钮时，发生了错误，名称为“ =”的无效表单控件无法聚焦。最后！

例如，结合使用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" >

有很多方法可以解决这个问题，例如

1. 将novalidate添加到您的表单中，但完全错误，因为它将删除表单验证，这将导致用户输入错误的信息。

<form action="...." class="payment-details" method="post" novalidate>

2. 使用可以从必填字段中删除必填属性，这也是错误的，因为它将再次删除表单验证。

   代替这个：

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. 当您不打算提交表单而不进行其他选择时，使用可以禁用必填字段。我认为这是推荐的解决方案。

   喜欢：

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

还是通过javascript / jquery代码禁用它取决于您的情况。

就我而言

ng-show被使用。
ng-if被放在它的位置并修复了我的错误。

如果您具有以下代码，它将显示该消息：

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

如果您有任何具有必填属性的字段，而这些属性在表单提交期间不可见，则会引发此错误。当您尝试隐藏该字段时，只需删除必需的属性。如果要再次显示该字段，可以添加必需的属性。这样，您的验证将不会受到影响，同时不会引发错误。

是的..如果隐藏的表单控件具有必填字段，那么它将显示此错误。一种解决方案是禁用此表单控件。这是因为通常如果您隐藏表单控件，那是因为您不关心其值。因此，在提交表单时不会发送该表单控件名称值对。

可能是您隐藏了（显示：无）具有必填属性的字段。

请检查所有必填字段对用户可见：)

对我来说，这种情况发生在一个<select>带有预选选项且值为“'' 的字段时：

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

不幸的是，这是唯一的占位符跨浏览器解决方案（如何为“选择”框创建占位符？）。

该问题出现在Chrome 43.0.2357.124上。

先前的答案对我都没有作用，并且我没有任何具有该required属性的隐藏字段。

在我的情况下，问题是由先有a <form>然后有a <fieldset>作为第一个子项（其<input>带有required属性）引起的。删除已<fieldset>解决的问题。或者，您可以用它包装表格；HTML5允许使用。

我使用的是Windows 7 x64，Chrome版本43.0.2357.130 m。

在您的中form，您可能隐藏了input具有required属性：

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

在form不能专注于这些元素，你必须删除required所有隐藏的投入，或实现验证功能的JavaScript来处理他们，如果你真的需要一个隐藏的输入。

如果您在复选框输入中遇到错误，则还有另一种可能性。如果您的复选框使用自定义CSS，该自定义CSS隐藏了默认设置，并用其他样式替换了默认设置，则这还会在Chrome出现验证错误时触发不可聚焦的错误。

我在样式表中找到了这个：

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

简单的解决方法是将其替换为：

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

在我的情况下，问题input type="radio" required在于隐藏于：

visibility: hidden;

如果要求的输入类型radio或checkbox具有display: none;CSS属性，还将显示此错误消息。

如果要创建自定义单选框/复选框输入，必须在其中将其从UI中隐藏并仍保留该required属性，则应改用：

opacity: 0; CSS属性

向novalidate表单添加属性将有助于：

<form name="myform" novalidate>

如果表单字段验证失败，则在Chrome上会发生此问题，但是由于相应的无效控件无法聚焦，浏览器尝试在其旁边显示消息“请填写此字段”的尝试也失败了。

由于多种原因，在触发验证时，表单控件可能无法聚焦。下列两种情况是最主要的原因：

• 根据业务逻辑的当前上下文，该字段无关紧要。在这种情况下，应该从DOM中删除相应的控件，或者此时不应该用required属性标记该控件。

• 由于用户按输入上的ENTER键，可能会发生过早验证。或者用户单击按钮/输入控件的形式尚未type正确定义控件的属性。如果按钮的type属性未设置为button，则Chrome（或与此相关的任何其他浏览器）每次单击按钮都会执行一次验证，因为这submit是按钮type属性的默认值。

  要解决该问题，如果页面上有一个按钮除了执行提交或重置操作外还执行其他操作，请始终记住执行以下操作：<button type="button">。

另请参阅https://stackoverflow.com/a/7264966/1356062