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

Question

我面临着众所周知的 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。

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

Answer 1

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

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

... step="any" ...

Step on w3s

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

Answer 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 社区的错误在哪里。