Html name='' 的无效表单控件不可聚焦。没有任何需要或隐藏的输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30644606/
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. WITHOUT ANY REQUIRED OR HIDDEN INPUTS
提问by nach
I'm facing the well known Chrome's "not-focusable-input" error but my situation is different from the explained in the other post I could find there.
我面临着众所周知的 Chrome 的“not-focusable-input”错误，但我的情况与我在那里找到的另一篇文章中解释的不同。
I have this error message duplicated first on a well pointed input, this input has no required attribute: The code:
我首先在一个明确的输入上复制了此错误消息，此输入没有必需的属性：代码：
<fieldset>
<label>Total (montaje incl.)</label>
<input type="number" id="priceFinal" name="priceFinal">
</fieldset>
The error: An invalid form control with name='priceFinal' is not focusable.
错误： 名称为 ='priceFinal' 的无效表单控件不可聚焦。
While the user is filling the form this field gets its value by a js script with jquery. The user type a size in another input, the script do its maths with the size value and then put the outcome in the 'priceFinal' input with the jquery function: .val()
当用户填写表单时，此字段通过带有 jquery 的 js 脚本获取其值。用户在另一个输入中输入一个大小，脚本使用大小值进行数学运算，然后使用 jquery 函数将结果放入“priceFinal”输入中：.val()
In the browser we can see that the input is correctly filled and no errors are displayed at that time. And with the 'novalidate' solution everything goes fine, so it couldn't be responsible for the nofocusable error, I think.
在浏览器中我们可以看到输入是正确填写的，当时没有显示任何错误。并且使用 'novalidate' 解决方案一切正常，所以我认为它不能对 nofocusable 错误负责。
Then I got the same error with an input with no name which I didn't write and doesn't exist in my DOM:
然后我遇到了同样的错误，输入没有我没有写的名字，也不存在于我的 DOM 中：
An invalid form control with name='' is not focusable.
name='' 的无效表单控件不可聚焦。
This is weird because the only input without name in my form is the type:submit one
这很奇怪，因为我的表单中唯一没有名称的输入是 type:submit one
<input type="submit" class="btn btn-default" value="Ver presupuesto" />
I have a few required fields but I've always checked that their are all filled when I send the form. I paste it just in case it could help:
我有一些必填字段，但我总是在发送表格时检查它们是否都已填写。我粘贴它以防万一它可以帮助：
<fieldset>
<input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos" class="cInput" required >
<input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
<input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>
<fieldset>
<input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
<input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required>
</fieldset>
The novalidate solution clears the error but it doesn't fix it, I mean there must be a way to solve it with no hacks.
novalidate 解决方案清除了错误，但它没有修复它，我的意思是必须有一种方法可以解决它而没有黑客攻击。
Any one have any idea of what's might going on? Thanks
任何人都知道可能会发生什么？谢谢
回答by Neto Yo
I had the same problem, and everyone was blaming to the poor hidden inputs been required, but seems like a bug having your required field inside a fieldset. Chrome tries to focus (for some unknown reason) your fieldset instead of your required input.
我遇到了同样的问题，每个人都归咎于需要的隐藏输入不佳，但似乎是一个错误，将您的必填字段放在字段集中。Chrome 尝试聚焦（出于某种未知原因）您的字段集而不是您所需的输入。
This bug is present only in chrome I tested in version 43.0.2357.124 m. Doesn't happen in firefox.
此错误仅存在于我在 43.0.2357.124 m 版本中测试的 chrome 中。在 Firefox 中不会发生。
Example (very simple).
示例（非常简单）。
<form>
<fieldset name="mybug">
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<input type="submit" name="submit" value="send" />
</fieldset>
</form>An invalid form control with name='mybug'is not focusable.
无效的表单控件name='mybug'不可聚焦。
The bug is hard to spot because usually fieldsets don't have a name so name=''is a WTF! but slice piece by piece the form until I found the culprid.
If you get your required input from the fieldset the error is gone.
该错误很难发现，因为通常字段集没有名称，name=''WTF 也是如此！但是将表格一块一块地切片，直到我找到罪魁祸首。如果您从字段集中获得所需的输入，错误就会消失。
<form>
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<fieldset name="mybug">
<input type="submit" name="submit" value="send" />
</fieldset>
</form>I would report it but I don't know where is the chrome community for bugs.
我会报告它，但我不知道错误的 chrome 社区在哪里。
回答by Doug
Thanks to this post, I saw that my problem also rested with Chrome trying to focus on my fieldsets, instead of the input field.
感谢这篇文章，我发现我的问题也出在 Chrome 试图专注于我的字段集，而不是输入字段。
To get a better response from the console:
要从控制台获得更好的响应：
- Assign every DOM element a new name
- Set every input & select style.display to 'block'
Changed the type of input[type="hidden"] elements to 'text'
function cleanInputs(){ var inputs = document.getElementsByTagName( 'input' ), selects = document.getElementsByTagName( 'select' ), all = document.getElementsByTagName( '*' ); for( var i=0, x=all.length; i<x; i++ ){ all[i].setAttribute( 'name', i + '_test' ); } for( var i=0, x=selects.length; i<x; i++ ){ selects[i].style.display = 'block'; } for( var i=0, x=inputs.length; i<x; i++ ){ if( inputs[i].getAttribute( 'type' ) === 'hidden' ){ inputs[i].setAttribute( 'type', 'text' ); } inputs[i].style.display = 'block'; } return true; }
- 为每个 DOM 元素分配一个新名称
- 设置每个输入并选择 style.display 为 'block'
将 input[type="hidden"] 元素的类型更改为 'text'
function cleanInputs(){ var inputs = document.getElementsByTagName( 'input' ), selects = document.getElementsByTagName( 'select' ), all = document.getElementsByTagName( '*' ); for( var i=0, x=all.length; i<x; i++ ){ all[i].setAttribute( 'name', i + '_test' ); } for( var i=0, x=selects.length; i<x; i++ ){ selects[i].style.display = 'block'; } for( var i=0, x=inputs.length; i<x; i++ ){ if( inputs[i].getAttribute( 'type' ) === 'hidden' ){ inputs[i].setAttribute( 'type', 'text' ); } inputs[i].style.display = 'block'; } return true; }
In the console, I ran cleanInputs() and then submitted the form. The result, from the console, was:
在控制台中，我运行了 cleanInputs() 然后提交了表单。结果，从控制台，是：
An invalid form control with name='28_test' is not focusable.
An invalid form control with name='103_test' is not focusable.
name='28_test' 的无效表单控件不可聚焦。
name='103_test' 的无效表单控件不可聚焦。
Then, switching over to the Web Developer "Elements" view, I was able to find "28_test" and "103_test" (both fieldsets) -- confirming that my problem was a required input field, nested inside a fieldset.
然后，切换到 Web Developer 的“Elements”视图，我能够找到“28_test”和“103_test”（两个字段集）——确认我的问题是一个必需的输入字段，嵌套在一个字段集内。
回答by Sjoerd
Nach gave me the best pointer... (y) I also had a input type="number" with step="0.1" and the console shows me this error while validating: An invalid form control with name='' is not focusable.
Nach 给了我最好的指针......（y）我还有一个 input type="number" with step="0.1" 并且控制台在验证时向我显示了这个错误： An invalid form control with name='' is not focusable .
remove the step="0.1" on the element and now the form can be validated
删除元素上的 step="0.1"，现在可以验证表单
回答by iltaf khalid
I had the same issue so I removed required="required" from the troublesome fields.
我遇到了同样的问题，所以我从麻烦的字段中删除了 required="required"。
回答by nach
While I was writting the question I realized one thing: the value the script was putting into the 'priceFinal' field sometimes was a decimal number.
当我在写这个问题时，我意识到一件事：脚本放入 'priceFinal' 字段的值有时是一个十进制数。
In this case the solution was to write the step attribute for this input:
在这种情况下，解决方案是为此输入编写 step 属性：
... step="any" ...
So this 'nofocusable' bug is not only a required and hidden fields issue, it's also generated by format conflicts.
因此，这个“无法聚焦”的错误不仅是必填字段和隐藏字段的问题，也是由格式冲突产生的。
回答by acarayol
If you get the error when jQuery function is executed, try to put "return false" on your function, or function(e) { e.preventDefault(); ... }
如果在执行 jQuery 函数时出现错误，请尝试将“return false”放在您的函数上，或者 function(e) { e.preventDefault(); ... }
回答by Canaan Etai
i had this issue once. to fix it, add
我曾经遇到过这个问题。修复它，添加
novalidate
as an attribute to the form. e.g
作为表单的一个属性。例如
<form action="" novalidate>
....
</form>
回答by Mohammad Amir
Here is the solution....
这是解决方案......
<form>
<input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>
Many people do not realize that passing falseinto ng-requireddisables the directive.
许多人没有意识到传递false到ng-required禁用指令。
