带有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.});

此外，这可能是“无效的表单控件”仅在GoogleChrome的副本

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

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

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

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

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

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

e. g.

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

这应该完成任务。

对我有用…干杯

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

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

Chrome将无法找到任何空的、隐藏的和必需的要关注的元素。

希望有帮助。我完全接受这个解决方案。

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

由于多种原因，表单控件在触发验证时可能无法获得焦点。下面描述的两个场景是最突出的原因：

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

• 由于用户在输入上按下输入键，或者用户单击表单中未正确定义控件#0属性的按钮/输入控件，可能会导致过早验证。如果按钮的type属性未设置为#1，Chrome（或任何其他浏览器）在每次单击按钮时执行验证，因为#2是按钮#0属性的默认值。

为了解决这个问题，如果你的页面上有一个按钮做了提交或重置以外的事情，请记住这样做：<button type="button">。

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

我意识到验证器对注入的文档的触发速度比文档准备好的速度快，因此它抱怨。

我最初的ng要求标签是使用可见性标签（vm.flags.has高中）。

我通过创建一个专用标志来设置所需的解决方案

我在设置该标志时添加了一个10毫秒的回调，问题得到了解决。

 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>

确保表单中所有具有必需属性的控件也设置了name属性

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

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

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

该问题出现在Chrome43.0.2357.124。

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

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

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

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

产生该错误是因为浏览器试图将焦点放在必填字段上，以警告用户必填字段，但这些必填字段隐藏在显示无div中，因此浏览器无法将焦点放在它们上。我从可见选项卡提交，所需字段位于隐藏选项卡中，因此出现了错误。

要修复，请确保您控制所需字段已填充。

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

对于Angular使用：

ng-需要="boolean"

只有当值为true时，才会应用html5的“所需”属性。

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

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

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

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

简单的修复是将其替换为：

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

对于选择2 JQuery问题

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

解决方案您可以在表单的每个元素上注入事件侦听器和“无效”事件，以便您可以在HTML5验证事件之前进行操作。

$('form select').each(function(i){this.addEventListener('invalid', function(e){var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element idvar _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 secondssetTimeout(function(){$('#'+_s2Id+' ul').removeClass('_invalid');},3000);return true;}, false);});

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

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

在我的情况下，我有一个选择框，它被jQuery标记器使用内联样式隐藏。如果我不选择任何标记，浏览器会在表单提交时抛出上述错误。

所以，我使用下面的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 opacityopacity: 0;height: 0px;
}

我在克隆表单中使用的超文本标记语言元素时收到了相同的错误。

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

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

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

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

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

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

编辑：

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

submitHandler() {const form = document.body.querySelector('#formId');
// Fix issue with html5 validationif (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='确认'的无效表单控件无法获得焦点。

可能是您使用选填/必填属性隐藏（显示：无）字段。

请检查所有必填字段对用户可见：）

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

visibility: hidden;

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

如果你想创建自定义单选/复选框输入，它们必须从UI中隐藏并且仍然保留required属性，你应该使用：

opacity: 0; CSS属性

我希望在这冗长的答案种子中不要错过我的场景真的很奇怪。

我有div元素，通过在它们中调用的对话框动态更新以加载和操作。

简而言之，div id有

<div id="name${instance.username}"/>

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

将其缩小到这个范围，重新测试使用数字代替，即id似乎可以解决这个问题。

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

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

<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代码（取决于实体）执行以下操作：$（'#周期o'）。删除at tr（'必需'）；$（"#周期o-容器"）。隐藏（）；

当用户选择另一个实体时：$（"#周期o-容器"）. show（）；$（'#perido'）. prop（'必需'， true）；

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

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

所以，我所做的是：

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

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

我在使用Angular JS时发现了同样的问题。它是由选填/必填和ng-hide一起使用引起的。当我在隐藏此元素时单击提交按钮时，它最终发生了错误带有name="的无效表单控件无法获得焦点。！

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

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

我通过用ng模式替换所需的来解决它。

例如解决方案：

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

对于其他AngularJS 1. x用户来说，出现这个错误是因为我隐藏了一个表单控件，而不是在我不需要控件完成时将其完全从DOM中删除。

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

希望这对你的边缘案例用户有帮助。

在我的情况下…

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

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

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

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

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

在我的案例中，问题在于type="datetime-local"，由于某种原因，它在表单提交时被验证。

我改变了这个

<input type="datetime-local" />

到那个

<input type="text" />

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

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

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

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

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

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

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

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

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

我仍然不知道为什么使用该代码会产生错误，只要这个声明它应该是有效的，即使没有我相信的“min”。

奇怪的是，每个人都建议删除验证，而验证的存在是有原因的…无论如何，如果您使用自定义控件并希望维护验证，您可以这样做：

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

.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 eventif(e.target.value) {e.preventDefault();}});

不仅仅是其他答案中提到的required字段。它也是由将#1字段放置在包含无效值的隐藏#2中。引起的

考虑下面的例子，

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

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

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

无需验证="无需验证"

当我在物化表单中创建<select>字段时，它被转换为包含许多风格化的字段的托管字段，而真正的<select>字段被框架隐藏，仅用于将所选值传递给post请求。

因此，它将始终显示控制台错误，除非我使用browser-default类对我的<select>字段进行Materialize管理。

另一种方法是使用带有type="button"而不是type="submit"的按钮，并使用$('form').submit()发布发送表单，但您将失去浏览器验证UI，并且必须开发自己的或使用框架的。

对于使用ElementInternals API的自定义元素，元素不能将delegatesFocus: true与阴影根一起使用，因为元素必须在暴露的表单的DOM树中直接接收焦点（目前，这可能会演变）（父表单可以在阴影根中，它必须与自定义和其他表单元素在树的同一部分）；元素必须是可见的，并且在我的实验中tabindex=0需要在元素上（-1似乎也起作用）

使用自定义元素从googlechrome展开的演示位于https://jimmont.github.io/samples/report-validity/

错误只是简单地报告一个具有指示它需要验证的属性的元素在验证出现问题时无法获得焦点，因此用户可以纠正错误；如果错误和信息按预期出现，您可以忽略错误；否则，这可能是一些UI功能隐藏元素和意外行为混合的结果；在实现中可以使用另一种方法来允许用户返回某种流，但目前这似乎超出了问题的范围

哇，这里有很多答案！

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

逻辑简单明了：

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

超文本标记语言

<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;}

jQuery

$('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;}

对我来说，问题是div中的输入类型电子邮件，具有可见性：隐藏，类似这样

<form><div style="visibility: hidden;"><input type="email" name="email" id="email">............</form>

然后您可以将type="email"更改为type="text"或删除可见性：隐藏；

当您向输入字段提供style="display-no-"和必需属性时，会出现此问题，并且在提交时会进行验证。例如：

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

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

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

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

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

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

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

如果您不想要其他回复中提到的HTML5验证，您可以禁用它。但是如果你仍然想要HTML5验证，你可以在提交按钮上添加一个“单击”事件侦听器来显示隐藏的字段。因此，单击事件将使字段可见，验证不会再抛出该错误。

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

而不是使用display:none，您可以使用opacity: 0;

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