仅在Google Chrome浏览器中显示“无效的表单控件”

下面的代码在Safari中运行良好，但在Chrome和Firefox中表单不会提交。 Chrome控制台logging错误An invalid form control with name='' is not focusable 。 有任何想法吗？

请注意，虽然下面的控件没有名称，但它们在提交时应该有名字，由下面的Javascript填充。 这个表单在Safari中工作。

 <form method="POST" action="/add/bundle"> <p> <input type="text" name="singular" placeholder="Singular Name" required> <input type="text" name="plural" placeholder="Plural Name" required> </p> <h4>Asset Fields</h4> <div class="template-view" id="template_row" style="display:none"> <input type="text" data-keyname="name" placeholder="Field Name" required> <input type="text" data-keyname="hint" placeholder="Hint"> <select data-keyname="fieldtype" required> <option value="">Field Type...</option> <option value="Email">Email</option> <option value="Password">Password</option> <option value="Text">Text</option> </select> <input type="checkbox" data-keyname="required" value="true"> Required <input type="checkbox" data-keyname="search" value="true"> Searchable <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete <input type="radio" data-keyname="label" value="label" name="label"> Label <input type="radio" data-keyname="unique" value="unique" name="unique"> Unique <button class="add" type="button">+</button> <button class="remove" type="button">-</button> </div> <div id="target_list"></div> <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> </form> <script> function addDiv() { var pCount = $('.template-view', '#target_list').length; var pClone = $('#template_row').clone(); $('select, input, textarea', pClone).each(function(idx, el){ $el = $(this); if ((el).type == 'radio'){ $el.attr('value', pCount + '_' + $el.data('keyname')); } else { $el.attr('name', pCount + '_' + $el.data('keyname')); }; }); $('#target_list').append(pClone); pClone.show(); } function removeDiv(elem){ var pCount = $('.template-view', '#target_list').length; if (pCount != 1) { $(elem).closest('.template-view').remove(); } }; $('.add').live('click', function(){ addDiv(); }); $('.remove').live('click', function(){ removeDiv(this); }); $(document).ready(addDiv); </script> 

Answer 1

Chrome想要专注于需要的控件，但仍然是空的，以便它可以popup消息“请填写此字段”。 但是，如果控件隐藏在Chrome想要popup消息的时候，那就是在提交表单的时候，Chrome因为隐藏而无法关注控件，因此表单不会提交。

所以，为了解决这个问题，当一个控件被javascript隐藏时，我们也必须从该控件中删除“required”属性。

Answer 2

如果你不关心HTML5validation（也许你是在JS或服务器validation），你可以尝试添加“novalidate”的forms或input元素。

Answer 3

它会显示这个消息，如果你有这样的代码：

 <form> <div style="display: none;"> <input name="test" type="text" required/> </div> <input type="submit"/> </form> 

解决这个问题将取决于网站应该如何工作

例如，如果你不想要表单提交，除非这个字段是必需的，你应该禁用提交button

所以显示div的js代码也应该启用提交button

你也可以隐藏button（应该被禁用和隐藏，因为如果它被隐藏，但不被禁用，用户可以用其他方式提交表单，例如在任何其他字段按enter键，但如果button被禁用，这将不会发生

如果你想要提交表单，如果div被隐藏，你应该禁用里面的任何必要的input，并启用input，而你显示div

如果有人需要这样的代码，你应该告诉我你需要什么

Answer 4

尝试使用适当的HTML5控件的标签像数字（整数）

 <input type='number' min='0' pattern ='[0-9]*' step='1'/> 

为小数或浮动

  <input type='number' min='0' step='Any'/> 

步骤='任何'没有这个，你不能提交你的表单input任何十进制或浮点数，如3.5或4.6在上述领域。

尝试修复模式，键入HTML5控件来解决这个问题。

Answer 5

我得到这个错误，并确定它实际上是在一个没有隐藏的领域。

在这种情况下，它是一个type="number"字段，这是必需的。 当这个字段没有input任何值时，错误信息显示在控制台中，表格不被提交。 input一个值，然后将其删除意味着validation错误按预期显示。

我相信这是Chrome中的一个错误：我现在的解决方法是想出一个初始值/默认值。

Answer 6

我有错误：

名称='telefono'的无效表单控件不可对焦。

发生这种情况是因为我没有正确使用所需的字段，单击checkbok时启用和禁用。 解决的办法是在checkbok没有标记的时候删除required属性，并在checkbox被标记时将其标记为需要。

 var telefono = document.getElementById("telefono"); telefono.removeAttribute("required"); 

Answer 7

我有这个问题，当我有类=“隐藏”的input字段，因为我使用的是button，而不是无线电子弹 – 并通过JS更改“活动”状态..

我只是添加了一个额外的无线电input字段的一部分，我想要的味精出现在同一组：

 <input type="radio" id="thenorm" name="ppoption" value="" required style="opacity:0"/> 

另外两个活动项目符号是不可见的，这一个是没有的，这触发validation信息，没有控制台错误 – 一点点的黑客，但是这些天不是什么..

Answer 8

我必须这样做来修复这个bug，因为我有一些type="number"其中min="0.00000001" ：

HTML：

 <input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" /> 

JS：

 $('input[type="submit"]').click(function(e) { //prevent chrome bug $("input:hidden").val(null); }); 

如果我没有将所有隐藏的input字段设置为null chrome仍然会尝试validationinput。

Answer 9

这个错误得到，如果添加小数格式。 我只是添加

 step="0.1" 

Answer 10

 $("...").attr("required"); and $("...").removeAttr("required"); 

直到我把我所有的jQuery代码之间：

 $(document).ready(function() { //jQuery code goes here }); 

Answer 11

required更换required =“required”