我的网站上有一个严重的问题。在Google Chrome中，有些客户无法前往我的付款页面。在尝试提交表单时，我收到此错误：
An invalid form control with name='' is not focusable.
这是来自JavaScript控制台。
我读到问题可能是由于隐藏字段具有必需属性。现在的问题是我们使用的是.net webforms必需的字段验证器，而不是html5必需属性。
这个错误似乎是随机的。有没有人知道解决方案？
陈述是不够的
向表单添加novalidate属性将有所帮助
它没有解释问题，OP可能不理解为什么它会有所帮助，或者它是否真的有用。
Here是一个真正解释案例的答案，了解问题应该能够让您找到适合您开发的解决方案：
Chrome希望专注于所需的控件，但仍然是空的，以便它可以弹出消息“请填写此字段”。但是，如果控件在Chrome想要弹出消息时隐藏，即在提交表单时，Chrome无法专注于控件，因为它是隐藏的，因此表单不会提交。
因此，为了解决这个问题，当javascript隐藏控件时，我们还必须从该控件中删除“required”属性。
为了充分利用警告，请考虑这一点 - 在验证失败时不要隐藏字段。但这不是一个严格的规则，也不是一个规则。正如我在下面的评论中提到的，我解释道
在某些情况下，问题根本不是问题，并且不会导致应用程序中的功能丢失。然后可能会忽略错误。
由于过早验证，也可能出现错误。当您具有没有set type属性的<button>输入时，可能会发生过早验证。如果没有按钮的type属性设置为按钮，Chrome（或任何其他浏览器）会在每次单击按钮时执行验证，因为submit是默认的按钮类型。要解决这个问题，如果您的页面上有一个按钮，除了提交或重置之外还有其他功能，请务必记住这样做：<button type="button">
对于Select2 Jquery问题
问题是由于HTML5验证无法聚焦隐藏的无效元素。当我处理jQuery Select2插件时，我遇到了这个问题。
解决方案您可以为表单的每个元素注入一个事件监听器和'invalid'事件，以便您可以在HTML5 validate事件之前进行操作。
$('form select').each(function(i){
this.addEventListener('invalid', function(e){
var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
var _posS2 = $('#'+_s2Id).position();
//get the current position of respective select2
$('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
//this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
$('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
/*
//Adjust the left and top position accordingly
*/
//remove invalid class after 3 seconds
setTimeout(function(){
$('#'+_s2Id+' ul').removeClass('_invalid');
},3000);
return true;
}, false);
});
如果您在复选框输入上收到错误，还有另一种可能性。如果您的复选框使用隐藏默认值的自定义CSS并将其替换为其他样式，则这也会在验证错误时触发Chrome中无法解决的错误。
我在样式表中找到了这个：
input[type="checkbox"] {
visibility: hidden;
}
简单的解决方法是将其替换为：
input[type="checkbox"] {
opacity: 0;
}
是的..如果隐藏的表单控件具有必填字段，则显示此错误。一种解决方案是禁用此表单控件。这是因为通常如果您隐藏表单控件，那是因为您不关心它的值。因此，在提交表单时不会发送此表单控件名称值对。
当你有一个包含必填字段的普通表单并提交表单然后在提交后直接隐藏它（使用javascript），没有时间让验证功能起作用时，另一个可能的原因并没有涵盖在所有以前的答案中。
验证功能将尝试关注所需字段并显示错误验证消息，但该字段已被隐藏，因此“名称='的无效表单控件不可聚焦”。出现！
编辑：
要处理这种情况，只需在提交处理程序中添加以下条件
submitHandler() {
const form = document.body.querySelector('#formId');
// Fix issue with html5 validation
if (form.checkValidity && !form.checkValidity()) {
return;
}
// Submit and hide form safely
}
编辑：说明
假设您在提交时隐藏了表单，此代码保证在表单生效之前不会隐藏表单/字段。因此，如果字段无效，浏览器可以专注于它而没有任何问题，因为仍然显示该字段。
还有一些事情让我感到惊讶......我有一个表单，它有两个不同实体的动态行为。一个实体需要一些其他实体不需要的字段。所以，我的JS代码，取决于实体，做类似的事情：$（'＃periodo'）。removeAttr（'required'）; $（ “＃periodo容器”）隐藏（）;
当用户选择另一个实体时：$（“＃periodo-container”）。show（）; $（'＃periodo'）。prop（'required'，true）;
但有时候，在提交表单时，问题会出现：“名称为句号无效的无效表单控件”不可调焦（我使用相同的id和名称值）。
要解决此问题，您必须确保始终可以看到您正在设置或删除“必需”的输入。
所以，我做的是：
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required');
$("#periodo-container").hide(); //then hide
多数民众赞成解决了我的问题...令人难以置信。
如果您有这样的代码，它将显示该消息：
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
对于角度使用：
required =“boolean”
如果值为true，这将仅应用html5'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
你可以试试.removeAttribute("required")那些在窗口加载时隐藏的元素。由于javascript（标签形式）很有可能将相关元素标记为隐藏
EG
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
这应该完成任务。
它对我有用......干杯
我来这里回答说我自己触发了这个问题，基于不关闭</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>
触发器
名称='userId'的无效表单控件不可聚焦。
名称='password'的无效表单控件不可调焦。
名称='confirm'的无效表单控件不可调焦。
在我的情况下..
ng-show正在被使用。
ng-if被置于其位置并修复了我的错误。
在表单中添加novalidate属性将有助于：
<form name="myform" novalidate>
有很多方法可以解决这个问题
<form action="...." class="payment-details" method="post" novalidate>
<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">
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">
或通过javascript / jquery代码禁用它取决于您的方案。
我在使用Angular JS时发现了同样的问题。它是由于需要与ng-hide一起使用而引起的。当我隐藏此元素时单击提交按钮然后发生错误名称为'''的无效表单控件不可聚焦。最后！
例如，与所需的ng-hide一起使用：
<input type="text" ng-hide="for some condition" required something >
我通过用ng-pattern替换所需的来解决它。
例如解决方案：
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
让我说明我的情况，因为它与上述所有解决方案都不同。我有一个未正确关闭的html标记。元素不是required，但它嵌入在hidden div中
在我的案例中的问题是type="datetime-local"，由于某种原因 - 在表单提交中得到验证。
我换了这个
<input type="datetime-local" />
进入那个
<input type="text" />
我想在这里回答，因为没有这些答案或任何其他Google结果为我解决了这个问题。
对我来说，它与字段集或隐藏的输入无关。
我发现如果我使用max="5"（例如）它会产生这个错误。如果我使用maxlength="5" ......没有错误。
我能够多次重现错误和清除错误。
我仍然不知道为什么使用该代码产生错误，只要this声明它应该是有效的，即使没有“min”我相信。
另外，另一个简单的答案是使用HTML5占位符属性，然后就不需要使用任何js验证。
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
Chrome无法找到要关注的任何空白，隐藏和必需元素。简单解决方案
希望有所帮助。我完全按照这个解决方案排序。
我带着同样的问题来到这里。对我来说（根据需要注入隐藏元素 - 即在工作应用程序中进行教育）具有所需的标记。
我意识到验证器在注入的速度比文件准备好的时候更快，因此它抱怨了。
我原来的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>
确保表单中具有required属性的所有控件都设置了name属性
这个错误发生在我身上，因为我提交的表单包含未填写的必填字段。
产生错误是因为浏览器试图关注所需的字段以警告用户需要字段，但这些必填字段隐藏在display none div中，因此浏览器无法关注它们。我从一个可见的选项卡提交，所需的字段在隐藏的选项卡中，因此错误。
要修复，请确保控制所需的字段已填充。
这是因为表单中有一个带必需属性的隐藏输入。
在我的例子中，我有一个选择框，它被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;
}
克隆用于表单的HTML元素时收到了同样的错误。
（我有一个部分完整的表单，其中注入了一个模板，然后模板被修改）
该错误引用了原始字段，而不是克隆版本。
在运行验证之前，我找不到任何会强制表单重新评估自身的方法（希望它能摆脱对现在不存在的旧字段的任何引用）。
为了解决这个问题，我从原始元素中删除了所需的属性，并在将其注入表单之前将其动态添加到克隆字段中。表单现在可以正确验证克隆和修改的字段。
在你的form中，你可能隐藏了具有input属性的required：
<input type="hidden" required /><input type="file" required style="display: none;"/>form不能专注于那些元素，你必须从所有隐藏的输入中删除required，或者在javascript中实现验证函数来处理它们，如果你真的需要一个隐藏的输入。
我希望在这个冗长的答案种子中不会遗漏的情景真的很奇怪。
我有div元素，通过在其中调用的dialogBox动态更新以加载并执行操作。
简而言之，div ids有
<div id="name${instance.username}"/>
我有一个用户：测试帐户，由于某种原因，编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。
把它缩小到这个并重新测试使用数字而不是像id似乎可以解决这个问题。
如果其他人有这个问题，我也经历过同样的事情。正如评论中所讨论的，这是由于浏览器尝试验证隐藏字段。它在表单中找到空字段并试图专注于它们，但因为它们被设置为display:none;，所以它不能。因此错误。
我能够通过使用类似的东西来解决它：
$("body").on("submit", ".myForm", function(evt) {
// Disable things that we don't want to validate.
$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);
// If HTML5 Validation is available let it run. Otherwise prevent default.
if (this.el.checkValidity && !this.el.checkValidity()) {
// Re-enable things that we previously disabled.
$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
return true;
}
evt.preventDefault();
// Re-enable things that we previously disabled.
$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
// Whatever other form processing stuff goes here.
});
在我的情况下，问题是input type="radio" required被隐藏：
visibility: hidden;
如果所需的输入类型radio或checkbox具有display: none; CSS属性，则此错误消息也将显示。
如果要创建自定义单选/复选框输入，必须在UI中隐藏它们并仍保留required属性，您应该使用：
opacity: 0; CSS属性
之前的答案都不适用于我，我没有任何隐藏字段与required属性。
在我的情况下，问题是由于<form>然后<fieldset>作为它的第一个孩子，它持有<input>属性的required。删除<fieldset>解决了这个问题。或者你可以用它包装你的表格;它是HTML5允许的。
我使用的是Windows 7 x64，Chrome版本43.0.2357.130米。
可能是您使用required属性隐藏（display：none）字段。
请检查用户可以看到的所有必填字段:)
对我来说，当有一个<select>字段带有预先选择的值为''时会发生这种情况：
<select name="foo" required="required">
<option value="" selected="selected">Select something</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
不幸的是，它是占位符唯一的跨浏览器解决方案（How do I make a placeholder for a 'select' box?）。
问题出现在Chrome 43.0.2357.124上。
如果您有任何具有必需属性的字段在表单提交期间不可见，则将抛出此错误。您尝试隐藏该字段时只需删除所需的属性。如果要再次显示该字段，可以添加必需属性。通过这种方式，您的验证不会受到影响，同时不会抛出错误。