名称=''的无效表单控件不可聚焦.没有任何要求或隐藏输入

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中不存在:

名称=''的无效表单控件不可聚焦.

这很奇怪,因为我的表单中没有名称的唯一输入是类型: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解决方案清除错误,但它没有修复它,我的意思是必须有一种方法来解决它没有黑客.

任何人都知道可能会发生什么？谢谢

Answer 1

我遇到了同样的问题,每个人都指责所需的可怜隐藏输入,但看起来像是一个在字段集中包含所需字段的错误.Chrome会尝试关注(出于某种未知原因)您的字段集而不是您所需的输入.

此错误仅出现在版本43.0.2357.124 m中测试的chrome I中.在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'不可聚焦.

这个bug很难被发现,因为通常字段集没有名称所以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社区的bug在哪里.

Answer 2

感谢这篇文章,我看到我的问题还在于Chrome试图关注我的fieldsets,而不是输入字段.

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

• 为每个DOM元素分配一个新名称
• 设置每个输入并选择style.display为'block'

• 将输入[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()然后提交了表单.从控制台得到的结果是:

名称='28_test'的无效表单控件无法调焦.

名称='103_test'的无效表单控件无法调焦.

然后,切换到Web Developer"Elements"视图,我能够找到"28_test"和"103_test"(两个字段集) - 确认我的问题是一个必需的输入字段,嵌套在字段集中.

Answer 3

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

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

... step="any" ...

踩w3s

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