对我来说，这发生了，当有一个<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出现此问题。

前面的答案都不适合我，而且我没有任何具有必需属性的隐藏字段。

在我的例子中，问题是由于有一个<form>和一个<fieldset>作为它的第一个子元素，它包含了具有所需属性的<input>。删除<fieldset>解决了这个问题。或者你可以用它来包装你的表单;HTML5是允许的。

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

确保表单中具有所需属性的所有控件也具有name属性集

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

我发现这在我的样式表:

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

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

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

另一个可能的原因，并没有涵盖在所有前面的答案，当你有一个正常的表单与必填字段，你提交了表单，然后隐藏它直接提交(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
  }

编辑:解释

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

在克隆HTML元素用于表单时，我收到了相同的错误。

(我有一个部分完整的表单，其中有一个模板注入其中，然后模板被修改)

错误是引用原始字段，而不是克隆版本。

我找不到任何方法可以在运行验证之前强制表单重新计算自身(希望它能摆脱对现在不存在的旧字段的任何引用)。

为了解决这个问题，我从原始元素中删除了必需的属性，并在将其注入表单之前动态地将其添加到克隆字段中。表单现在正确地验证克隆和修改的字段。