Html name='' 的无效表单控件不可聚焦
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22148080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
An invalid form control with name='' is not focusable
提问by mp1990
I have an acute problem on my website. In Google Chrome some customers are not able to proceed to my payment page. When trying to submit a form I get this error:
我的网站有一个严重的问题。在谷歌浏览器中，一些客户无法进入我的付款页面。尝试提交表单时出现此错误：
An invalid form control with name='' is not focusable.
This is from the JavaScript console.
这是来自 JavaScript 控制台。
I read that the problem could be due to hidden fields having the required attribute. Now the problem is that we are using .net webforms required field validators, and not the html5 required attribute.
我读到问题可能是由于隐藏字段具有必需的属性。现在的问题是我们使用的是 .net webforms required 字段验证器，而不是 html5 required 属性。
It seems random who gets this error. Is there anyone who knows a solution for this?
谁得到这个错误似乎是随机的。有没有人知道这个解决方案？
回答by Igwe Kalu
This issue occurs on Chrome if a form field fails validation, but due to the respective invalid control not being focusable the browser's attempt to display the message "Please fill out this field"next to it fails as well.
如果表单字段验证失败，Chrome 上会出现此问题，但由于相应的无效控件不可聚焦，浏览器尝试在其旁边显示消息“请填写此字段”也失败。
A form control may not be focusable at the time validation is triggered for several reasons. The two scenarios described below are the most prominent causes:
由于多种原因，表单控件在触发验证时可能无法获得焦点。下面描述的两种情况是最突出的原因：
The field is irrelevant according to the current context of the business logic. In such a scenario, the respective control should be removed from the DOM or it should not be marked with the
requiredattribute at that point.Premature validation may occur due to a user pressing ENTERkey on an input. Or a user clicking on a button/input control in the form which has not defined the
typeattribute of the control correctly. If the type attribute of a button is not set tobutton, Chrome (or any other browser for that matter) performs a validation each time the button is clicked becausesubmitis the default value of a button'stypeattribute.To solve the problem, if you have a button on your page that does something else other than submitor reset, always remember to do this:
<button type="button">.
根据业务逻辑的当前上下文，该字段无关紧要。在这种情况下，相应的控件应该从 DOM 中删除，或者此时不应使用该
required属性进行标记。由于用户在输入上按下ENTER键，可能会发生过早验证。或者用户点击了表单中没有
type正确定义控件属性的按钮/输入控件。如果按钮的 type 属性未设置为button，则每次单击按钮时，Chrome（或任何其他浏览器）都会执行验证，因为submit是按钮type属性的默认值。为了解决这个问题，如果你有你的页面上的一个按钮，确实比其他别的东西提交或重置，永远记住要做到这一点：
<button type="button">。
回答by user2909164
Adding a novalidateattribute to the form will help:
向novalidate表单添加属性将有助于：
<form name="myform" novalidate>
回答by Ankit Sharma
In your form, You might have hidden inputhaving requiredattribute:
在您的form, 您可能隐藏了input具有required属性：
<input type="hidden" required /><input type="file" required style="display: none;"/>
<input type="hidden" required /><input type="file" required style="display: none;"/>
The formcan't focus on those elements, you have to remove requiredfrom all hidden inputs, or implement a validation function in javascript to handle them if you really require a hidden input.
在form不能专注于这些元素，你必须删除required所有隐藏的投入，或实现验证功能的JavaScript来处理他们，如果你真的需要一个隐藏的输入。
回答by Horatio Alderaan
In case anyone else has this issue, I experienced the same thing. As discussed in the comments, it was due to the browser attempting to validate hidden fields. It was finding empty fields in the form and trying to focus on them, but because they were set to display:none;, it couldn't. Hence the error.
如果其他人有这个问题，我也遇到过同样的事情。正如评论中所讨论的，这是由于浏览器试图验证隐藏字段。它在表单中查找空字段并试图关注它们，但因为它们被设置为display:none;，所以不能。因此错误。
I was able to solve it by using something similar to this:
我能够通过使用类似的东西来解决它：
$("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.
});
Also, this is possibly a duplicate of "Invalid form control" only in Google Chrome
此外，这可能是仅在 Google Chrome 中的“无效表单控件”的副本
回答by Gus
In my case the problem was with the input type="radio" requiredbeing hidden with:
在我的情况下，问题在于input type="radio" required被隐藏：
visibility: hidden;
visibility: hidden;
This error message will also show if the required input type radioor checkboxhas a display: none;CSS property.
此错误消息还将显示所需的输入类型radio或checkbox是否具有display: none;CSS 属性。
If you want to create custom radio/checkbox inputs where they must be hidden from the UIand still keep the requiredattribute, you should instead use the:
如果要创建自定义单选框/复选框输入，它们必须在 UI 中隐藏并仍然保留该required属性，则应改为使用：
opacity: 0;CSS property
opacity: 0;CSS 属性
回答by Pere
None of the previous answers worked for me, and I don't have any hidden fields with the requiredattribute.
以前的答案都不适合我，而且我没有任何具有该required属性的隐藏字段。
In my case, the problem was caused by having a <form>and then a <fieldset>as its first child, which holds the <input>with the requiredattribute. Removing the <fieldset>solved the problem. Or you can wrap your form with it; it is allowed by HTML5.
就我而言，问题是由 a<form>和 a<fieldset>作为其第一个子代引起的，该子代<input>具有required属性。删除<fieldset>解决了问题。或者你可以用它包装你的表格；这是 HTML5 允许的。
I'm on Windows 7 x64, Chrome version 43.0.2357.130 m.
我使用的是 Windows 7 x64，Chrome 版本 43.0.2357.130 m。
回答by Sam
Yet another possibility if you're getting the error on a checkbox input. If your checkboxes use custom CSS which hides the default and replaces it with some other styling, this will also trigger the not focusable error in Chrome on validation error.
如果您在复选框输入上收到错误，则还有另一种可能性。如果您的复选框使用自定义 CSS 隐藏默认值并将其替换为其他样式，这也会在 Chrome 中触发验证错误时出现不可聚焦错误。
I found this in my stylesheet:
我在我的样式表中找到了这个：
input[type="checkbox"] {
visibility: hidden;
}
Simple fix was to replace it with this:
简单的修复是用这个替换它：
input[type="checkbox"] {
opacity: 0;
}
回答by ghuroo
It can be that you have hidden (display: none) fields with the requiredattribute.
可能是您隐藏了 (display: none) 具有required属性的字段。
Please check all required fields are visible to the user :)
请检查所有必填字段是否对用户可见:)
回答by piotr_cz
For me this happens, when there's a <select>field with pre-selected option with value of '':
对我来说，当有一个<select>带有预选选项且值为 ''的字段时，会发生这种情况：
<select name="foo" required="required">
<option value="" selected="selected">Select something</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
Unfortunately it's the only cross-browser solution for a placeholder (How do I make a placeholder for a 'select' box?).
不幸的是，它是占位符的唯一跨浏览器解决方案（如何为“选择”框制作占位符？）。
The issue comes up on Chrome 43.0.2357.124.
该问题出现在 Chrome 43.0.2357.124 上。
回答by SudarP
For Select2 Jquery problem
对于 Select2 Jquery 问题
The problem is due to the HTML5 validation cannot focus a hidden invalid element. I came across this issue when I was dealing with jQuery Select2 plugin.
问题是由于 HTML5 验证无法聚焦隐藏的无效元素。我在处理 jQuery Select2 插件时遇到了这个问题。
SolutionYou could inject an event listener on and 'invalid' event of every element of a form so that you can manipulate just before the HTML5 validate event.
解决方案您可以在表单的每个元素的“无效”事件上注入一个事件侦听器，以便您可以在 HTML5 验证事件之前进行操作。
$('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);
});
