“无效的表单控件”仅在Google Chrome中

下面的代码在Safari中效果很好，但是在Chrome和Firefox中，该表单无法提交。Chrome控制台记录错误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>

Chrome希望将重点放在所需的控件上，但该控件仍然为空，以便弹出消息“请填写此字段”。但是，如果控件在Chrome希望弹出消息的那一刻（即在提交表单时）被隐藏，则Chrome无法专注于该控件，因为它已隐藏，因此该表单不会提交。

因此，要解决此问题，当一个控件被javascript隐藏时，我们还必须从该控件中删除“ required”属性。

如果您具有以下代码，它将显示该消息：

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

  <input type="submit"/>
</form>

该问题的解决方案将取决于站点的工作方式

例如，如果您不希望提交表单，除非需要此字段，则应禁用“提交”按钮

所以显示div的js代码也应该启用Submit按钮

您也可以隐藏按钮（应禁用和隐藏，因为如果隐藏但未禁用，则用户可以通过其他方式提交表单，例如按 enter在其他任何字段中，但是如果禁用按钮，则不会发生这种情况

如果您要在div隐藏的情况下提交表单，则应禁用其中的所有必需输入，并在显示div时启用输入

如果有人需要密码，那么您应该告诉我您到底需要什么

如果您不关心HTML5验证（也许是在JS或服务器上进行验证），则可以尝试在表单或输入元素中添加“ novalidate”。

尝试对HTML5控件（如Number（integers））使用正确的标签

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

小数或浮点数

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

step ='Any'如果没有此选项，您将无法提交在上述字段中输入任何小数或浮点值（例如3.5或4.6）的表单。

尝试修复模式，输入HTML5控件的类型即可解决此问题。

我收到此错误，并确定它实际上是在未被隐藏的字段上。

在这种情况下， type="number"必填字段。如果未在该字段中输入任何值，则错误消息将显示在控制台中，并且不会提交表单。输入一个值，然后将其删除意味着验证错误按预期显示。

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

我有错误：

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

之所以发生这种情况，是因为我没有正确使用必填字段，该字段在单击复选框时已启用和禁用。解决方案是，required每当未标记复选框时都删除属性，并在标记复选框时将其标记为必需。

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

我必须做这样的事情来修复错误，因为我有一些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);
});

如果我没有将所有隐藏的输入字段设置为nullchrome，仍然会尝试验证输入。

没有验证将做的工作。

<form action="whatever" method="post" novalidate>

当我在输入字段上输入class =“ hidden”时遇到了这个问题，因为我使用的是按钮而不是单选符号-并通过JS更改了“活动”状态。

我只是在希望让味精出现的同一组中添加了一个额外的无线电输入字段部分：

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

其他2个活动项目符号是不可见的，这不是一个项目，它触发了验证消息，并且没有控制台错误-有点骇人听闻，但如今还不是。

如果添加十进制格式，则会出现此错误。我只是添加

step="0.1"

当我输入的数字（999999）超出了我为表单设置的范围时，我收到了此错误消息。

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

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

在我将所有jQuery代码放在这之间之前，它对我不起作用：

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

替换required为required =“ required”