Question

以下代码在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>

Answer 1

Chrome希望专注于所需但仍为空的控件，以便它可以弹出消息“请填写此字段”。但是，如果控件在Chrome想要弹出消息时隐藏，即在提交表单时，Chrome无法专注于控件，因为它是隐藏的，因此表单不会提交。< / p>

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

Answer 2

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

Answer 3

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

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

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

此问题的解决方案将取决于网站的工作方式

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

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

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

如果您希望表单在div被隐藏时提交，则应禁用其中的任何所需输入并在显示div时启用输入

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

Answer 4

尝试为HTML5控件使用正确的标签喜欢数字（整数）

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

表示小数或浮点数

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

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

尝试修复模式，输入HTML5控件来解决此问题。

Answer 5

我收到了这个错误，并确定它实际上是在一个未隐藏的字段上。

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

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

Answer 6

我有错误：

name ='telefono'的无效表单控件无法调焦。

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

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

Answer 7

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

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

Answer 8

没有验证将完成这项工作。

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

Answer 9

当我在输入字段中输入class =“hidden”时遇到此问题，因为我使用的是按钮而不是无线电项目符号 - 并通过JS更改“活动”状态..

我只是在同一组中添加了一个额外的无线电输入字段，我想要显示msg：

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

其他2个活跃项目符号是不可见的，这一个不是，这会触发验证消息，没有控制台错误 - 有点像黑客，但这些天不存在......

Answer 10

如果添加小数格式，则会出现此错误。我只是添加

step="0.1"

Answer 11

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

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

Answer 12

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

在我将所有jQuery代码放在其间之前，

对我不起作用：

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

Answer 13

将required替换为required =＆＃34; required＆＃34;

“无效的表单控件”仅适用于Google Chrome

13 个答案:

HTML：

JS：