name='' 的无效窗体控件不可聚焦

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

<form name="myform" novalidate>

如果其他人有这个问题，我也会遇到同样的事情。正如评论中所讨论的，这是由于浏览器试图验证隐藏字段。它在表单中查找空字段并试图专注于它们，但由于它们被设置为 ，它不能。因此错误。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.
});

此外，这可能是仅在 Google Chrome 中“无效表单控件”的重复项

在您的 中，您可能隐藏了 having 属性：forminputrequired

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

不能专注于这些元素，你必须从所有隐藏的输入中删除，或者如果你真的需要一个隐藏的输入，你必须在javascript中实现一个验证函数来处理它们。formrequired

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

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

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

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

例如：

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

这应该可以完成任务。

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

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

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

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

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

要解决此问题，如果您的页面上有一个按钮，除了提交或重置之外，还执行其他操作，请始终记住执行以下操作：.<button type="button">

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

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

不幸的是，它是占位符的唯一跨浏览器解决方案（如何为“选择”框制作占位符？

该问题出现在 Chrome 43.0.2357.124 上。

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

就我而言，问题是由于先将 a 和 a 作为其第一个子项引起的，该子项具有 with 属性。删除解决了问题。或者你可以用它包装你的表单;这是 HTML5 允许的。<form><fieldset><input>required<fieldset>

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

如果您有任何具有必需属性的字段，而该字段在表单提交期间不可见，则将引发此错误。当您尝试隐藏该字段时，您只需删除所需的属性即可。如果要再次显示该字段，可以添加所需的属性。这样，您的验证不会受到影响，同时也不会引发错误。

对于 Angular 使用：

ng-required=“布尔值”

仅当值为 true 时，这将应用 html5 'required' 属性。

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

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

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

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

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

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

对于 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);          
});

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

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

验证功能将尝试将焦点放在必填字段上并显示错误验证消息，但该字段已被隐藏，因此会出现“name='' 的无效窗体控件无法聚焦！

编辑：

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

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

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

    // Submit and hide form safely
  }

编辑：解释

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

我来这里是为了回答说，我自己触发了这个问题，因为没有关闭标签并且在同一页面上有多个表单。第一种形式将扩展到包括寻求对来自其他地方的表格输入的验证。由于这些表单是隐藏的，因此它们触发了错误。</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' 的无效窗体控件不可聚焦。

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

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

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

visibility: hidden;

此错误消息还将显示所需的输入类型是否具有 CSS 属性。radiocheckboxdisplay: none;

如果要创建自定义单选/复选框输入，并且它们必须在 UI 中隐藏并仍保留属性，则应改用：required

opacity: 0;CSS 属性

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

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

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

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

   取而代之的是：

<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">

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

   喜欢：

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

或通过 JavaScript/jQuery 代码禁用它取决于您的方案。

有些事情仍然让我感到惊讶......我有一个表单，其中包含两个不同实体的动态行为。一个实体需要一些字段，而另一个实体不需要。 因此，根据实体的不同，我的 JS 代码会执行以下操作： $（'#periodo'）.removeAttr（'必需'）; $（“#periodo-容器”）.hide（）;

当用户选择其他实体时： $（“#periodo-容器”）.show（）; $（'#periodo'）.prop（'必需'， true）;

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

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

所以，我所做的是：

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

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

我在使用 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" >

就我而言..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第一步。从输入中删除 display none，使输入变得可聚焦

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

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

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

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

考虑下面的例子，

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

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

哇，这里有很多答案！

如果问题是 ，那么您只需几行即可解决此问题。<input type="hidden" required="true" />

逻辑简单明了：

1. 在页面加载时用一个类标记每个必需的输入。data-required
2. 提交时，执行两件事：a） 从所有隐藏输入中添加到所有 required=“true”'。required="true"data-required inputs. b) Remove

[HTML全

<input type="submit" id="submit-button">

纯 JavaScript

document.querySelector('input,textarea,select').filter('[required]').classList.add('data-required');

document.querySelector('#submit-button').addEventListener('click', function(event) {
    document.querySelector('.data-required').prop('required', true);
    document.querySelector('input,textarea,select').filter('[required]:hidden').prop('required', false);
    return true;
}

j查询

$('input,textarea,select').filter('[required]').addClass('data-required');

$('#submit-button').on('click', function(event) {
    $('.data-required').prop('required', true);
    $('input,textarea,select').filter('[required]:hidden').prop('required', false);
    return true;
}

当您向输入字段提供 style=“display： none;” 和 required 属性时，会出现此问题，并且提交时将进行验证。 例如：

<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');

如果隐藏具有必需属性的输入元素，则会发生这种情况。

你可以用display:noneopacity: 0;

我还必须使用一些CSS规则（如）来完美地定位我的元素。position:absolute

在您的输入中。你保留隐藏输入，这就是它抛出以下原因的原因：formrequired

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

检查您的输入名称是否无效，您将其隐藏且为必填项。

只需从隐藏的输入名称中删除 即可。做。required