Question

我的网站上存在严重问题。在Google Chrome中，有些客户无法前往我的付款页面。在尝试提交表单时，我收到此错误：

An invalid form control with name='' is not focusable.

这是来自JavaScript控制台。

我读到问题可能是由于隐藏字段具有必需属性。现在问题是我们使用.net webforms必需的字段验证器，而不是html5必需属性。

似乎随机出现此错误。有没有人知道这方面的解决方案？

Answer 1

这还不足以陈述

向表单添加novalidate属性将有助于

它没有解释问题，OP可能没有理解为什么它会有所帮助，或者它是否真的有用。

Here这是一个真正解释案例的答案，了解问题应该能够让您找到适合您发展的解决方案：

Chrome希望专注于所需的控件，但仍然是空的，以便它可以弹出消息＆＃39;请填写此字段＆＃39;。但是，如果控件在Chrome想要弹出消息的位置隐藏，即在提交表单时，Chrome无法专注于控件，因为它是隐藏的，因此表单赢了＆＃39;提交。

因此，为了解决这个问题，当javascript隐藏控件时，我们还必须删除所需的＆＃39;来自该控件的属性。

要充分利用警告，请考虑这一点 - 在验证失败时隐藏字段。但这不是一个严格的规则，也不是一个规则。正如我在下面的评论中提到的，我解释

在某些情况下，问题根本不是问题，并且不会导致应用程序中的功能丢失。然后可能会忽略错误。

更新：2015年8月21日

由于过早验证，也可能出现错误。如果您的<button>输入没有设置类型属性，则可能会发生过早验证。如果按钮的类型属性未设置为按钮，Chrome（或任何其他浏览器）会在每次点击按钮时执行验证，因为提交是默认设置按钮类型。要解决此问题，如果您的网页上有一个按钮，除了提交或重置之外的其他内容，永远记住这样做：<button type="button">

Answer 2

在表单中添加novalidate属性会有所帮助：

<form name="myform" novalidate>

Answer 3

在form中，您可能隐藏了input required属性：

<input type="hidden" required />
<input type="file" required style="display: none;"/>

form无法关注这些元素，您必须从所有隐藏输入中删除required，或者在javascript中实现验证功能，以便在您确实需要隐藏输入时对其进行处理。 / p>

Answer 4

如果其他人有这个问题，我也经历过同样的事情。正如评论中所讨论的，这是由于浏览器尝试验证隐藏字段。它在表单中找到空字段并尝试关注它们，但因为它们设置为display:none;，所以它不能。因此错误。

我能够通过使用类似的东西解决它：

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

此外，这可能是"Invalid form control" only in Google Chrome

的副本

Answer 5

就我而言，问题在于隐藏了input type="radio" required：

visibility: hidden;

如果所需的输入类型radio或checkbox具有display: none; CSS属性，则还会显示此错误消息。

如果您想要创建自定义广播/复选框输入，必须在屏幕上隐藏并仍然保留required属性，您应该使用：

opacity: 0; CSS属性

Answer 6

之前的答案都不适合我，而且我没有required属性的任何隐藏字段。

在我的情况下，问题是由于<form>然后<fieldset>作为其第一个子项，其中<input>包含required属性。删除<fieldset>解决了问题。或者你可以用它包装你的表格;它是HTML5允许的。

我使用的是Windows 7 x64，Chrome版本43.0.2357.130 m。

Answer 7

您可以使用必需属性隐藏（display：none）字段。

请检查用户可以看到的所有必填字段：）

Answer 8

对我来说，当有一个<select>字段带有预先选择的选项且价值为'时会发生这种情况：

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

不幸的是，它是占位符（How do I make a placeholder for a 'select' box?）唯一的跨浏览器解决方案。

问题出现在Chrome 43.0.2357.124上。

Answer 9

对于Select2 Jquery问题

问题是由于HTML5验证无法聚焦隐藏的无效元素。当我处理jQuery Select2插件时，我遇到了这个问题。

<强>解决方案您可以注入一个事件监听器并且“无效”＆＃39;表单中每个元素的事件，以便您可以在HTML5验证事件之前进行操作。

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Answer 10

如果您在复选框输入上收到错误，还有另一种可能性。如果您的复选框使用隐藏默认值的自定义CSS并将其替换为其他样式，则还会在验证错误时触发Chrome中无法解决的错误。

我在样式表中找到了这个：

input[type="checkbox"] {
    visibility: hidden;
}

简单的解决方法是将其替换为：

input[type="checkbox"] {
    opacity: 0;
}

Answer 11

另一个可能的原因，如果您有一个包含必填字段的普通表单并且您提交表单然后在提交后直接隐藏它（使用javascript），并且没有时间让验证功能起作用，那么所有以前的答案都没有涵盖。

验证功能将尝试关注必填字段并显示错误验证消息但该字段已被隐藏，因此“名称='的无效表单控件不可聚焦”。出现！

修改

要处理这种情况，只需在提交处理程序
中添加以下条件
submitHandler() { const form = document.body.querySelector('#formId'); // Fix issue with html5 validation if (form.checkValidity && !form.checkValidity()) { return; } // Submit and hide form safely }

编辑：说明

假设您在提交时隐藏了表单，此代码保证在表单生效之前不会隐藏表单/字段。因此，如果一个字段无效，浏览器可以专注于它而没有任何问题，因为仍然显示该字段。

Answer 12

有些东西仍让我感到惊讶......我有一个表单，其中包含两个不同实体的动态行为。一个实体需要一些其他实体不需要的字段。所以，我的JS代码，取决于实体，执行如下操作： $（ '＃periodo'）removeAttr（ '必要'）。 $（ “＃periodo容器”）隐藏（）;

当用户选择其他实体时： $（ “＃periodo容器”）显示（）。 $（'＃periodo'）。prop（'required'，true）;

但有时候，在提交表单时，问题会出现：“名称=句号'的无效表单控件不可调焦（我对id和名称使用相同的值）。

要解决此问题，您必须确保您正在设置或删除“必需”的输入始终可见。

所以，我做的是：

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

这解决了我的问题......难以置信。

Answer 13

是的..如果隐藏的表单控件具有必填字段，则显示此错误。一种解决方案是禁用此表单控件。这是因为通常如果您隐藏表单控件，那是因为您不关心它的值。因此，在提交表单时不会发送此表单控件名称值对。

Answer 14

对于Angular使用：

NG-需要=＆＃34;布尔＆＃34;

这仅适用于html5＆＃39; required＆＃39;如果值为true，则属性。

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Answer 15

不仅 required 字段（如其他答案中所述）。这也是由于将<input>字段放置在具有无效值的隐藏<div>中。

请考虑以下示例，

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div>

这将引发相同的错误。因此，请确保隐藏的<input>中的<div>字段不包含任何无效值。

Answer 16

我来到这里是为了回答我自己已经触发了这个问题，因为我没有关闭</form>标签并且在同一页面上有多个表格。第一种形式将扩展到包括寻求来自其他地方的表格输入的验证。因为这些形式是隐藏的，所以它们触发了错误。

所以例如：

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

触发器

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

名称='密码'的无效表单控件无法调焦。

name ='confirm'的无效表单控件不可调焦。

Answer 17

您可以尝试.removeAttribute("required")查看窗口加载时隐藏的元素。因为javascript（标签形式）

很可能将相关元素标记为隐藏

e.g。

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

这应该完成任务。

它对我有用......干杯

Answer 18

以我为例。

groovy.lang.MissingMethodException: No signature of method: org.apache.kafka.clients.producer.KafkaProducer.send() is applicable for argument types: (org.spockframework.lang.Wildcard) values: [[*_]] Possible solutions: send(org.apache.kafka.clients.producer.ProducerRecord), send(org.apache.kafka.clients.producer.ProducerRecord, org.apache.kafka.clients.producer.Callback), find(), find(groovy.lang.Closure), any(), sleep(long)正在使用。
ProducerRecord被替换并修复了我的错误。

Answer 19

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

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

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

Answer 20

每个人都建议删除验证是很奇怪的，而验证的存在是有原因的... 无论如何，如果您使用的是自定义控件，并且想要保持验证，就可以执行以下操作：

第一步。从输入中删除任何显示内容，使输入变得可聚焦

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

第二步。如果样式不够，请在特定情况下为输入添加无效的事件处理程序

attrTermsInput.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
});

Answer 21

让我陈述一下我的情况，因为它与上述所有解决方案都不相同。我有一个HTML标记未正确关闭。元素不是不是 required，但已嵌入hidden div

中

在我的情况下，问题出在type="datetime-local"上，出于某种原因，该<input type="datetime-local" />在提交表单时得到了验证。

我更改了

<input type="text" />

进入

<ul>
    <li *ngFor="let menuItem of menuList">
        <a *ngIf="!menuItem.submenuItems" [routerLink]="menuItem.routerLink">{{menuItem.name}}</a>
        <a *ngIf="menuItem.submenuItems"
           (click)="menuItem.opened = !menuItem.opened"
           routerLinkActive="active"
        >
            {{menuItem.name}}
        </a>
        <ul [@actionSubmenuShow]="menuItem.opened ? 'open' : 'closed'"
            style="display: none;">
            <li *ngFor="let submenuItem of menuItem.submenuItems">
                <a [routerLink]="submenuItem.routerLink">{{submenuItem.name}}</a>
            </li>
        </ul>
    </li>
</ul>

Answer 22

有很多方法可以解决这个问题，比如

在表单中添加novalidate但完全错误，因为它会删除表单验证，这会导致用户输入错误的信息。

<form action="...." class="payment-details" method="post" novalidate>

使用可以从必填字段中删除所需的属性，这也是错误的，因为它会再次删除表单验证。

而不是：

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

当您不打算提交表单而不是执行其他选项时，使用可以禁用必填字段。在我看来，这是推荐的解决方案。

像：

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

或通过javascript / jquery代码依赖于您的场景来禁用它。

Answer 23

使用Angular JS时发现了同样的问题。这是因为必需和 ng-hide 一起使用。当我在隐藏此元素时单击提交按钮，然后发生错误无法使用name =''的无效表单控件。最终！

例如，将ng-hide与required一起使用：

<input type="text" ng-hide="for some condition" required something >

我通过用ng-pattern替换所需的来解决它。

例如解决方案：

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Answer 24

<input type="submit" name="btnSave" value="Update" id="btnSave" formnovalidate="formnovalidate">

formnovalidate="formnovalidate"

Answer 25

我想在这里回答，因为这些回答或任何其他Google结果都没有为我解决问题。

对我来说，它与字段集或隐藏的输入无关。

我发现，如果我使用max="5"（例如），将会产生此错误。如果我使用maxlength="5" ...没有错误。

我能够多次重现错误并清除错误。

我仍然不知道为什么使用该代码会产生错误，据this指出，即使我认为没有“ min”，该错误也应该有效。

Answer 26

我看到这个问题经常被问到，我自己也遇到了这个“错误”。甚至有链接质疑这是否是Chrome中的实际错误。
这是当一个或多个表单输入类型元素被隐藏并且这些元素具有最小/最大限制（或某些其他验证限制）时发生的响应。

在创建表单时，没有元素的值，稍后元素的值可能会被填充或保持不变。在提交时，将对表单进行解析，并且超出这些验证限制的任何隐藏元素都将在控制台中抛出此“错误”，并且提交将失败。由于您无法访问这些元素（因为它们是隐藏的），因此这是唯一有效的响应。

这不是实际的错误也不是错误。这表明存在要提交的元素值超出一个或多个元素规定的限制。

要解决此问题，请在提交表单之前的任何时间为表单中隐藏的所有元素分配有效的默认值，否则这些“错误”将永远不会发生。并不是这样的错误，只是迫使您养成更好的编程习惯。

注意：如果您希望将这些值设置为超出验证限制的值，请使用form.addEventListener（'submit'，myFunction）拦截'submit'事件，并将这些元素填写在“ myFunction”中。似乎在“ myFunction（）被调用之前执行了验证检查。

Answer 27

不仅在指定required时，例如在使用min和max时，我也遇到了这个问题。

<input type="number" min="1900" max="2090" />

可以根据其他无线电值隐藏和显示该字段。因此，对于临时解决方案，我删除了验证。

Answer 28

对于其他的AngularJS 1.x用户，出现此错误是因为我不需要显示控件而不是将其完全从DOM中删除，而不是将其隐藏在窗体控件中。

我通过在包含需要验证的表单控件的div上使用ng-if而不是ng-show / ng-hide来解决了这个问题。

希望这可以帮助您边缘用户。

Answer 29

我的情景我希望不会错过这个冗长的答案，这真的很奇怪。

我有div元素，通过在其中调用的dialogBox动态更新以加载并执行操作。

简而言之，div ids已经

std::default_random_engine

我有一个用户：测试帐户，由于某种原因，编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。

将其缩小到此并重新测试使用数字而不是ID似乎可以解决问题。

Answer 30

或者另一个万无一失的答案是使用HTML5占位符属性，然后就不需要使用任何js验证。

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome无法找到要关注的任何空白，隐藏和必需元素。简单解决方案

希望有所帮助。我完全按照这个解决方案排序。

Answer 31

我带着同样的问题来到这里。对我来说（根据需要注入隐藏的元素 - 即在工作应用中的教育）有所需的标志。

我意识到验证器在注入的速度比文件准备好的时候更快，因此抱怨。

我原来的ng-required标签使用了可见性标签（vm.flags.hasHighSchool）。

我通过创建专用标志来解决所需的问题 ng-required =＆＃34; vm.flags.highSchoolRequired == true＆＃34;

我在设置该标志时添加了10ms的回调，问题解决了。

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

HTML：

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

Answer 32

克隆用于表单的HTML元素时收到了同样的错误。

（我有一个部分完整的表格，其中注入了一个模板，然后修改了模板）

错误是引用原始字段，而不是克隆版本。

在运行验证之前，我无法找到任何会强制表单重新评估自身的方法（希望它能够删除对现在不存在的旧字段的任何引用）

为了解决这个问题，我从原始元素中删除了所需的属性，并在将其注入表单之前将其动态添加到克隆字段中。表单现在可以正确验证克隆和修改的字段。

Answer 33

因为表格中有一个带有必需属性的隐藏输入。

就我而言，我有一个选择框，它被jquery tokenizer使用内联样式隐藏。如果我不选择任何令牌，浏览器会在表单提交时抛出上述错误。

所以，我使用下面的css技术修复它：

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Answer 34

确保表单中具有required属性的所有控件都具有name属性set

Answer 35

这个错误发生在我身上，因为我提交的表单中包含未填写的必填字段。

错误的产生是因为浏览器试图关注必需的字段以警告用户需要字段但是这些必填字段隐藏在display none div中，因此浏览器无法关注它们。我是从可见标签提交的，所需字段位于隐藏标签中，因此出现错误。

要修复，请确保您控制所填写的字段。

Answer 36

1> Adding a novalidate attribute to the form will help:
it will remove the  validation 


<form name="userForm" id="userForm" novalidate>

2> it can be issue of id or name value , it was already using somewhere 
change the value of id   and name 
2nd point help to fix the error

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

36 个答案:

更新：2015年8月21日