这发生在我身上，因为我正在使用Materialize JS/CSS框架。当我在物化表单中创建<select>字段时，它被转换为具有许多风格化字段的托管字段，而真正的<select>字段被框架隐藏，仅用于向post请求传递所选值。

因此，它将始终显示控制台错误，除非我使用浏览器默认类使<select>字段的Materialize管理无效。

另一种方法是使用一个带有type="button"而不是type="submit"的按钮，并使用$('form').submit()来发送表单，但您将失去浏览器验证UI，必须开发自己的UI，或者使用框架的UI。

这是因为表单中有一个带有required属性的隐藏输入。

在我的情况下，我有一个选择框，它是隐藏的jquery tokenizer使用内联风格。如果我没有选择任何令牌，浏览器在表单提交时抛出上述错误。

所以，我用下面的css技术修复了它:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

我希望在这个冗长的答案种子中没有遗漏我的场景是一些非常奇怪的事情。

我有div元素，动态更新通过对话框被调用在他们加载和得到行动。

简而言之，div id有

<div id="name${instance.username}"/>

我有一个用户:测试帐户，出于某种原因，编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。

缩小到这个范围，重新测试使用数字代替，即id似乎解决了这个问题。

对我来说，问题是在div中输入类型电子邮件的可见性:隐藏，类似这样的东西

<form>
  <div style="visibility: hidden;">
  <input type="email" name="email" id="email">
  ............
</form>

然后你可以改变type="email"为type="text"或删除可见性:隐藏;

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

您可以尝试. removeattribute ("required")用于那些在窗口加载时隐藏的元素。因为很有可能由于javascript(选项卡表单)，所讨论的元素被标记为隐藏

e.g.

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

这应该可以完成任务。

这对我很管用……干杯