name='' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入

Posted 2023-02-22

【中文标题】name=\'\' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入

【英文标题】：An invalid form control with name='' is not focusable. WITHOUT ANY REQUIRED OR HIDDEN INPUTSname='' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入

【发布时间】：2015-08-19 02:38:18

【问题描述】：

我面临着众所周知的 Chrome 的“不可聚焦输入”错误，但我的情况与我可以在那里找到的另一篇文章中的解释不同。

我在一个明确的输入上首先复制了这个错误消息，这个输入没有必需的属性： 代码：

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

错误： name='priceFinal' 的无效表单控件不可聚焦。

当用户填写表单时，该字段通过带有 jquery 的 js 脚本获取其值。用户在另一个输入中输入尺寸，脚本对尺寸值进行数学运算，然后使用 jquery 函数将结果放入“priceFinal”输入中：.val()

在浏览器中我们可以看到输入正确填写，当时没有显示错误。并且使用“novalidate”解决方案一切正常，所以我认为它不能对 nofocusable 错误负责。

然后我得到了同样的错误，输入没有我没有写并且在我的 DOM 中不存在的没有名称：

name='' 的无效表单控件不可聚焦。

这很奇怪，因为我的表单中唯一没有名字的输入是 type:submit one

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

我有一些必填字段，但我总是在发送表单时检查它们是否都已填写。我粘贴它以防万一：

<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>

novalidate 解决方案清除了错误，但并没有修复它，我的意思是必须有一种方法来解决它而无需 hack。

有人知道会发生什么吗？ 谢谢

【问题讨论】：

您是否有一个按钮控件在使用表单时被单击？ - 如果是，按钮的类型属性是否正确设置？ - 如果按钮不会导致表单提交，则必须将其 type 属性显式设置为 button：<button type="button"></button>.

【参考方案1】：

当我写这个问题时，我意识到一件事：脚本放入“priceFinal”字段的值有时是十进制数。

在这种情况下，解决方案是为此输入编写 step 属性：

... step="any" ...

Step on w3s

所以这个“nofocusable”错误不仅是一个必填字段和隐藏字段问题，它也是由格式冲突产生的。

【参考方案2】：

我遇到了同样的问题，每个人都在指责需要的隐藏输入太差，但在字段集中您的必填字段似乎是一个错误。 Chrome 尝试（出于某种未知原因）您的字段集而不是您所需的输入。

此错误仅存在于我在 43.0.2357.124 m 版本中测试的 chrome 中。 在 Firefox 中不会发生。

示例（非常简单）。

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

带有name='mybug' 的无效表单控件不可聚焦。

该错误很难发现，因为通常字段集没有名称，所以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>

我会报告它，但我不知道 chrome 社区的错误在哪里。

【讨论】：

谢谢，这使我走上了仅删除字段集的道路。在我这样做之后，我所有的问题都消失了。有关报告 Chrome 错误的信息：support.google.com/chrome/answer/95315?hl=en 或通过 code.google.com/p/chromium/issues/list 向 Chromium 报告它们

我们有完全相同的东西。 Chrome 尝试聚焦字段集。我只是改为 并且它可以工作。

同样的事情，但我会等待 chrome 解决这个问题。

【参考方案3】：

感谢这篇文章，我发现我的问题还在于 Chrome 试图专注于我的字段集，而不是输入字段。

要从控制台获得更好的响应：

为每个 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;

在控制台中，我运行了 cleanInputs()，然后提交了表单。 控制台的结果是：

name='28_test' 的无效表单控件不可聚焦。

name='103_test' 的无效表单控件不可聚焦。

然后，切换到 Web Developer“元素”视图，我能够找到“28_test”和“103_test”（两个字段集）——确认我的问题是嵌套在字段集中的必填输入字段。

【讨论】：

这非常有用，而且是一种很好的暴力识别方式。

这很有帮助，我一辈子都找不到这个错误的来源！

【参考方案4】：

Nach 给了我最好的指针... (y) 我还有一个输入 type="number" 和 step="0.1" 并且控制台在验证时向我显示了这个错误：An invalid form control with name=''无法聚焦。

删除元素上的step="0.1"，现在可以验证表单

【参考方案5】：

我遇到了同样的问题，所以我从麻烦的字段中删除了 required="required"。

【参考方案6】：

我曾经遇到过这个问题。要修复它，请添加

novalidate

作为表单的属性。例如

<form action="" novalidate>
....
</form>

【讨论】：

如果您需要对 UX 进行客户端表单验证，这不是“修复”。当然，无论如何您都应该验证服务器端。但是，如果客户在提交表单之前确切地知道缺少什么，这真的很有帮助。

这不是修复

【参考方案7】：

这是解决方案....

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

许多人没有意识到将false 传递给ng-required 会禁用指令。

【参考方案8】：

如果在执行 jQuery 函数时遇到错误，请尝试在函数上加上“return false”，或者 function(e) e.preventDefault(); ...