名称=“”的无效表单控件不可聚焦
我的网站有一个严重的问题。 在谷歌浏览器中，有些客户无法进入我的付款页面。 当试图提交一个表单时，我得到这个错误：
An invalid form control with name='' is not focusable. 这是从JavaScript控制台。
我读到的问题可能是由于隐藏的字段具有必需的属性。 现在的问题是，我们正在使用.net webforms所需的字段validation器，而不是HTML5所需的属性。
谁会得到这个错误似乎是随机的。 有没有人知道这个解决scheme？
将novalidate属性添加到表单将有助于：
<form name="myform" novalidate>
说这是不够的
将novalidate属性添加到表单将有所帮助
它没有解释这个问题，而且OP可能不知道为什么它会有帮助，或者它真的有帮助。
这是一个真正解释案例的答案，理解问题应该使你得到一个适合你的发展的解决scheme：
Chrome想要专注于需要的控件，但仍然是空的，以便它可以popup消息“请填写此字段”。 但是，如果控件隐藏在Chrome想要popup消息的时候，那就是在提交表单的时候，Chrome因为隐藏而无法关注控件，因此表单不会提交。
所以，为了解决这个问题，当一个控件被javascript隐藏时，我们也必须从该控件中删除“required”属性。
要充分利用警告，请考虑这一点 – validation失败时不要隐藏字段 。 但这不是一个严格的规定，也不是一个规则。 正如我在下面的评论中提到的那样，我解释了一下
在某些情况下，这个问题根本不是问题，也不会导致应用程序function的丢失。 那么错误可能被忽略。
更新：2015年8月21日
有问题的错误也可能由于过早的validation而出现。 如果您有<button>input而没有设置types属性，则可能会发生过早validation。 如果没有将button的type属性设置为button，则Chrome（或任何其他浏览器）会在每次单击该button时执行validation，因为submit是button的默认types。 为了解决这个问题，如果你的页面上有一个button，除了提交或重置之外 ，别忘了这样做： <button type="button">
在您的表单中，您可能隐藏了具有必需属性的input。
<input type="hidden" required />
因此，表单不能集中在那个元素上，你required从所有隐藏的input中移除required 。
如果有其他人有这个问题，我经历了同样的事情。 正如在评论中所讨论的，这是由于浏览器试图validation隐藏的字段。 它在表格中find空的字段，并试图将注意力集中在它们上面，但是因为它们被设置为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. });
此外，这可能是仅在Google Chrome中“无效的表单控件”的副本
以前的答案没有为我工作，我没有任何隐藏的字段与required属性。
在我的情况下，问题是由于有一个<form> ，然后是一个<fieldset>作为其第一个孩子，其中包含required属性<input> 。 删除<fieldset>解决了这个问题。 或者你可以用你的forms包装它; 它是由HTML5允许的。
我在Windows 7 x64，Chrome版本43.0.2357.130米。
对我来说，发生这种情况时，有一个带有值为“'的预选选项的<select>字段：
<select name="foo" required="required"> <option value="" selected="selected">Select something</option> <option value="bar">Bar</option> <option value="baz">Baz</option> </select>
不幸的是，它是占位符的唯一跨浏览器解决scheme（ 我如何为“select”框创build一个占位符？ ）。
这个问题出现在Chrome 43.0.2357.124上。
如果您在表单提交期间有任何不可见的必填属性的字段，则会引发此错误。 当您尝试隐藏该字段时，您只需删除必需的属性。 如果您想再次显示该字段，则可以添加必需的属性。 通过这种方式，您的validation将不会受到影响，同时不会抛出错误。
在我的情况下，问题是与input type="radio" required隐藏与：
visibility: hidden;
如果所需的inputtypesradio或checkbox有一个display: none;这个错误信息也将display: none; CSS属性。
如果你想创build自定义的广播/checkboxinput，他们必须隐藏在用户界面 ，仍然保持required属性，而不是使用：
opacity: 0; CSS属性
如果您在checkboxinput中收到错误，还有另外一种可能性。 如果您的checkbox使用隐藏默认的自定义CSS，并将其replace为其他样式，则这也会触发Chrome中出现validation错误时无法聚焦的错误。
我在我的样式表中find了这个：
input[type="checkbox"] { visibility: hidden; }
简单的修复就是用这个replace它：
input[type="checkbox"] { opacity: 0; }
对于Select2的Jquery问题
问题是由于HTML5validation无法集中隐藏的无效元素。 我在处理jQuery Select2插件时碰到过这个问题。
解决scheme您可以在表单的每个元素的“无效”事件上注入事件侦听器，以便在HTML5validation事件之前进行操作。
$('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); });
这可能是因为您隐藏（显示：无）字段与必需的属性。
请检查所有必填字段对用户是否可见:)
是的..如果一个隐藏的表单控件有必填字段，那么它显示这个错误。 一个解决scheme是禁用此表单控件 。 这是因为通常如果你隐藏了表单控件，那是因为你不关心它的价值。 所以这个表单控件名称值对在提交表单时不会被发送。
另一个可能的原因，并没有覆盖所有以前的答案，当你有一个正常的forms与必填字段，你提交表单，然后直接提交后（使用JavaScript）隐藏它没有时间validationfunction工作。
validationfunction将尝试专注于必填字段并显示错误validation消息，但该字段已被隐藏，所以“无效的窗体控件与名称=”是不可聚焦的。 出现！
编辑：
要处理这种情况，只需在提交处理程序中添加以下条件
submitHandler() { const form = document.body.querySelector('#formId'); // Fix issue with html5 validation if (form.checkValidity && !form.checkValidity()) { return; } // Submit and hide form safely }
编辑：说明
假设你隐藏了提交表单，这个代码保证表单/字段不会被隐藏，直到表单有效。 所以，如果一个字段是无效的，浏览器可以在没有问题的情况下关注它，因为这个字段仍然显示。
对于angular度使用：
NG-需要= “布尔”
如果值为true，这将只应用html5'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
它会显示这个消息，如果你有这样的代码：
<form> <div style="display: none;"> <input name="test" type="text" required/> </div> <input type="submit"/> </form>
您可以尝试.removeAttribute("required")的窗口加载时隐藏的那些元素。 因为这个元素很可能被标记为隐藏，因为javascript（标签forms）
例如
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){ document.getElementById('hidden_field').removeAttribute("required"); }
这应该做的任务。
它为我工作……欢呼声
1> Adding a novalidate attribute to the form will help: it will remove the validation <form name="userForm" id="userForm" novalidate> 2> it can be issue of id or name value , it was already using somewhere change the value of id and name 2nd point help to fix the error
另一种可靠的答案是使用HTML5占位符属性，那么将不需要使用任何jsvalidation。
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
Chrome将无法find任何空的，隐藏的和必需的元素来关注。 简单的scheme。
希望有所帮助。 我完全用这个解决schemesorting。
我来到这里也遇到了同样的问题。 对我来说（根据需要注入隐藏元素 – 即在工作应用程序中的教育）有必要的标志。
我意识到validation者是在注入的速度比文件准备好更快，因此它抱怨。
我最初的ng-required标签是使用可见性标签（vm.flags.hasHighSchool）。
我解决了通过创build一个专用标志来设置所需ng-required =“vm.flags.highSchoolRequired == true”
我添加了一个10ms的callback设置该标志，问题解决了。
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。
在我的情况下，我有一个select框，它是由jQuery的标记器使用内联样式隐藏。 如果我不select任何标记，浏览器会在表单提交时抛出上述错误。
所以，我使用下面的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元素以在表单中使用时收到相同的错误。
（我有一个部分完整的表单，其中注入了一个模板，然后模板被修改）
错误是引用原始字段，而不是克隆的版本。
在运行validation之前，我找不到任何会强制表单自我重新评估的方法（希望它会摆脱对现在不存在的旧字段的引用）。
为了解决这个问题，我从原始元素中删除了所需的属性，并在将它注入到表单之前dynamic地将其添加到克隆的字段中。 该表单现在可以正确validation克隆和修改的字段。
我来到这里是为了回答我自己触发了这个问题，而不是closures</form>标签，并在同一页面上有多个表单。 第一种forms将扩展到包括寻求来自其他地方的表单input的validation。 由于这些forms是隐藏的，所以引发了错误。
例如：
<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'的无效表单控件不可聚焦。
名称=“密码”的无效表单控件不可聚焦。
名称=“确认”的无效表单控件不可聚焦。
我希望在这个冗长的答案中不会错过的情景是非常奇怪的。
我有div元素dynamic更新通过一个对话框被调用在他们加载和获取行动。
简而言之，divids已经
<div id="name${instance.username}"/>
我有一个用户：testing帐户，由于某种原因，编码在java脚本世界做了一些奇怪的东西。 我得到了这个错误信息在其他地方工作的窗体。
缩小到这一点，并重新testing使用数字数字，而不是id似乎解决了这个问题。
