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

Posted 2023-02-22

【中文标题】仅在 Google Chrome 中出现“无效的表单控件”

【英文标题】："Invalid form control" only in Google Chrome

【发布时间】：2011-11-02 09:01:37

【问题描述】：

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

【问题讨论】：

只会发送successful 控件。要成功，控件必须有一个名称。还有其他要求（见链接）。

单选按钮有名字。其他所有内容都通过 JavaScript 获得名称。

【参考方案1】：

Chrome 希望专注于一个必需但仍为空的控件，以便它可以弹出消息“请填写此字段”。但是如果控件在Chrome要弹出消息的时候被隐藏，也就是在提交表单的时候，Chrome因为被隐藏而无法关注控件，所以表单不会提交。

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

【讨论】：

啊，太糟糕了。虽然我猜是有道理的，但如果字段被隐藏（可能是选项卡式表单......），浏览器可能无法猜测它希望您的界面如何处理验证错误消息。

谢谢，这行得通。可惜 Chrome 这样做了，它应该跳过这个字段。

当 textarea 中的文本长度超过 4100 个字母且没有隐藏的必填字段时，我在 Chrome for textarea 中遇到了这个问题。当文本长度

如果该字段在隐藏时不需要，那么禁用它不是更有意义吗？ (***.com/a/22753533/421243)

如果Chrome上仍然出现此错误但该字段不为空怎么办？你知道如何解决这个问题吗？

【参考方案2】：

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

【讨论】：

人们永远不应该做这样的事情，他应该让他的 js 代码与 html5 一起工作，而不仅仅是因为他无法处理它而关闭 html5

我不同意。你只需要一个很好的理由来做不同的事情。仍然有很多强大的验证库。 HTML5 验证简单、快速设置。最重要的是，遵循标准是好的。但这并不意味着它是“最好的”解决方案。永远不要把话说绝了。它总是取决于。尽管我同意您应该“永远”不完全跳过客户端验证。 ;-)

【参考方案3】：

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

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

小数或浮点数

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

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

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

【讨论】：

你解决了我的问题。但请注意，pattern 在type="number" 字段中似乎并不被普遍接受

【参考方案4】：

我遇到了错误：

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

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

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

【参考方案5】：

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

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

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

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

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

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

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

如果您希望表单在 div 隐藏的情况下提交，您应该禁用其中的任何必需输入并在显示 div 时启用输入

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

【讨论】：

是的..你能告诉解决方案吗？

@RexRex 我编辑答案看看这是否对你有帮助或告诉我你到底需要什么

@KaziMasumBillah 我不明白你能不能在回答中写下例子

【参考方案6】：

将required 替换为 required="required"

【讨论】：

Required 是一个 HTML5 属性，并且“required”与 required='required' 具有相同的含义，因为它没有其他可用的属性。

【参考方案7】：

我收到此错误，并确定它实际上位于未隐藏的字段中。

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

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

【讨论】：

Chrome 中可能存在的错误。也发生在我身上。 +1

【参考方案8】：

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

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

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

其他 2 个活动项目符号是不可见的，这个不可见，这会触发验证消息并且没有控制台错误 - 有点 hack 但这些天不是什么......

【参考方案9】：

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

直到我把所有的 jQuery 代码都放在这之间才对我有用：

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

【参考方案10】：

我必须做这样的事情来修复这个错误，因为我有一些 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 仍会尝试验证输入。

【参考方案11】：

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

step="0.1"

【参考方案12】：

没有验证可以完成这项工作。

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

【参考方案13】：

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

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