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

如果表单字段验证失败，Chrome 上会出现此问题，但由于相应的无效控件不可聚焦，浏览器尝试在其旁边显示“请填写此字段”消息的尝试也会失败。

由于多种原因，在触发验证时表单控件可能无法聚焦。下面描述的两种情况是最突出的原因：

根据业务逻辑的当前上下文，该字段是不相关的。在这种情况下，相应的控件应该被禁用或从 DOM 中删除，或者此时不使用所需的属性进行标记。

由于用户在输入上按 ENTER 键，可能会发生过早的验证。或者用户在没有正确定义控件类型属性的表单中单击按钮/输入控件。如果按钮的类型属性未设置为按钮，Chrome（或任何其他浏览器）每次单击按钮时都会执行验证，因为提交是按钮类型属性的默认值。

要解决此问题，如果您的页面上有一个按钮，该按钮执行 submit 或 reset 以外的其他操作，永远记得这样做：<button type="button">。

---

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

<form name="myform" novalidate>

---

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

form 不能专注于这些元素，您必须从所有隐藏输入中删除 required，或者如果您确实需要隐藏输入，则在 javascript 中实现验证函数来处理它们。

---

万一其他人有这个问题，我也经历过同样的事情。正如评论中所讨论的，这是由于浏览器试图验证隐藏字段。它在表单中查找空字段并尝试关注它们，但因为它们被设置为 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 的副本

---

在我的情况下，问题在于 input type="radio" required 被隐藏：

visibility: hidden;

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

如果您想创建必须对 UI 隐藏的自定义单选框/复选框输入，并且仍保留 required 属性，则应改为使用：

opacity: 0; CSS 属性

---

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

在我的例子中，这个问题是由一个 <form> 和一个 <fieldset> 作为它的第一个孩子引起的，它包含 <input> 和 required 属性。删除 <fieldset> 解决了问题。或者你可以用它包裹你的表格；它是 HTML5 允许的。

我在 Windows 7 x64，Chrome 版本 43.0.2357.130 m 上。

---

不仅是其他答案中提到的 required 字段。这也是由于将 <input> 字段放置在包含无效值的隐藏 <div> 中。

考虑下面的例子，

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

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

---

如果您在复选框输入中遇到错误，还有另一种可能性。如果您的复选框使用自定义 CSS 隐藏默认样式并将其替换为其他样式，这也会在验证错误时触发 Chrome 中的不可聚焦错误。

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

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

简单的解决方法是用这个替换它：

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

---

对我来说，当有一个带有预选选项的 <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 上。

---

对于 Select2 Jquery 问题

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

解决方案 您可以在表单的每个元素上注入一个事件侦听器和“无效”事件，以便您可以在 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);          
});

---

可能是您隐藏了（显示：无）具有所需属性的字段。

请检查所有必填字段对用户可见:)

---

当您提供 style="display: none;" 时会出现此问题以及输入字段的必需属性，并且在提交时将进行验证。例如：

<input type="text" name="name" id="name" style="display: none;" required>

可以通过从 HTML 的输入字段中删除所需属性来解决此问题。如果需要添加必需的属性，请动态添加。如果您使用的是 JQuery，请使用以下代码：

$("input").prop('required',true);

如果您需要动态删除此字段，

$("input").prop('required',false);

如果您不使用 JQuery，也可以使用纯 Javascript：

document.getElementById('element_id').removeAttribute('required');

---

如果您在表单提交期间有任何带有 required 属性的字段不可见，则会引发此错误。当您尝试隐藏该字段时，您只需删除所需的属性。如果您想再次显示该字段，您可以添加必需的属性。通过这种方式，您的验证不会受到影响，同时也不会抛出错误。

---

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

第一步。从输入中删除显示无，因此输入变得可聚焦

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

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

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

---

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

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

编辑：

要处理这种情况，只需在提交处理程序中添加以下条件

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

编辑：解释

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

---

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

将 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 代码禁用它取决于您的方案。

---

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

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

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

---

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

---

对于那些在窗口加载时隐藏的元素，您可以尝试 .removeAttribute("required")。因为很有可能由于javascript（选项卡式表单）而将相关元素标记为隐藏

例如

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

这应该完成任务。

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

---

我来这里是为了回答我自己触发了这个问题，因为我没有关闭 </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='password' 的无效表单控件不可聚焦。 name='confirm' 的无效表单控件不可聚焦。

---

有些事情仍然让我感到惊讶......我有一个具有两个不同实体的动态行为的表单。一个实体需要一些其他实体不需要的字段。因此，根据实体，我的 JS 代码会执行以下操作： $('#periodo').removeAttr('required'); $("#periodo-container").hide();

当用户选择另一个实体时： $("#periodo-container").show(); $('#periodo').prop('必需', true);

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

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

所以，我所做的是：

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

那解决了我的问题……难以置信。

---

在我的情况下..

正在使用 ng-show。
ng-if 已被放置并修复了我的错误。

---

对于角度使用：

ng-required="布尔"

如果值为 true，这只会应用 html5 的“必需”属性。

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

---

我在使用 Angular JS 时发现了同样的问题。这是由于将 required 与 ng-hide 一起使用造成的。当我在隐藏此元素的情况下单击提交按钮时，出现错误名称=''的无效表单控件不可聚焦。最后！

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

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

我通过用 ng-pattern 替换 required 来解决它。

例如解决方案：

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

---

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

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

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

---

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

就我而言，我有一个选择框，它被 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;

 }

---

对于那里的其他 AngularJS 1.x 用户，出现此错误是因为当我不需要完成控件时，我隐藏了一个表单控件而不是从 DOM 中完全删除它。

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

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

---

让我陈述一下我的情况，因为它与上述所有解决方案都不同。我有一个没有正确关闭的 html 标签。该元素不是 required，但它嵌入在 hidden div 中

我的问题出在 type="datetime-local" 上，出于某种原因，它在表单提交时得到了验证。

我改变了这个

<input type="datetime-local" />

进入那个

<input type="text" />

---

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

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

这不是一个实际的错误，也不是错误。这表明即将提交的元素值超出了一个或多个元素规定的限制。

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

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

---

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

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

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

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

我仍然不知道为什么使用该代码会产生错误，就this而言它应该是有效的，即使我相信没有“分钟”。

---