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


671

我的网站上有一个严重的问题。在Google Chrome浏览器中,某些客户无法进入我的付款页面。尝试提交表单时出现此错误:

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

这来自JavaScript控制台。

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

似乎谁得到此错误是随机的。有谁知道解决方案吗?


11
如果您认为这可能是由于隐藏的必填字段引起的,也许您应该检查在某些情况下这些字段是否仍为空白?例如,如果您从会话或类似内容中填写user_id,在某些情况下它可能保持空白?
dkasipovic 2014年

1
同意 在Google Chrome中打开开发者控制台(F12),然后检查字段的值以查看这些字段的值是否为空白。
香草Thrilla 2014年

感谢您的评论。虽然这对我没有任何意义?我有一个简单的asp.net表单,它使用asp.net表单控件。输入控件由框架生成。
mp1990

我检查了一下,输入字段中有值。我有一个隐藏的输入字段,它也有一个值。
mp1990

3
我认为这是必填字段,但在一般情况下不是“可见”的。它以拆分成几个选项卡的形式发生在我身上,触发错误的字段位于提交时不处于活动状态的选项卡中,我从字段中删除了必需属性并进行了特定验证
TexWiller

Answers:


817

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

由于多种原因,在触发验证时,表单控件可能无法聚焦。下列两种情况是最主要的原因:

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

  • 由于用户按输入上的ENTER键,可能会发生过早验证。或者用户单击按钮/输入控件的形式尚未type正确定义控件的属性。如果按钮的type属性未设置为button,则Chrome(或与此相关的任何其他浏览器)每次单击按钮都会执行一次验证,因为这submit是按钮type属性的默认值。

    要解决该问题,如果页面上有一个按钮除了执行提交重置操作外还执行其他操作,请始终记住执行以下操作:<button type="button">

另请参阅https://stackoverflow.com/a/7264966/1356062


2
当使用不支持客户端验证或不阻止表单提交的浏览器构建和测试页面时,可能会出现此问题(请参阅Safari)。下一位使用浏览器实际上会阻止客户端错误提交表单的开发人员或用户(请参阅Chrome;甚至是隐藏的表单元素)会遇到无法访问表单的问题,因为您无法提交表单并且不会收到任何消息浏览器或网站。通过“ novalidate”完全阻止验证不是正确的答案,因为客户端验证应支持用户输入。更改网站是解决方案。
graste

4
感谢您的详细回答。忽略required或添加novalidate从来都不是一个好的解决方法。
fatCop 2015年

2
这应该是正确的答案。如果您使用的是html5客户端验证,则添加novalidate可以解决一个问题,同时又可以解决另一个问题。糟糕的是,Chrome希望验证未显示的输入(因此不需要输入)。
kheit

1
在本例中,仅留下一个示例,其中有一个隐藏number字段,其中默认值不能按步长平均划分。更改步长大小可以解决此问题。
詹姆斯·斯科特

3
@IgweKalu的好电话。我在textarea字段上遇到了实施TinyMCE的问题。TinyMCE隐藏原始表单字段(“必需”)并触发此错误。解决方案,从表单中删除现藏“必需的”属性,并依靠其他方法,以确保其填充。
约翰

355

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

<form name="myform" novalidate>

41
这不是安全风险。(是依靠客户端检查的。)这是一个可用性问题。
Jukka K. Korpela 2014年

9
我尝试过,发现不需要“ novalidate”!我只是给表格起了个名字,一切正常!
Sunny Sharma 2014年

33
我尝试过,发现确实需要“ novalidate”。仅添加表单名称无效。
Jeff Tian

13
添加novalidate也会停止客户端验证,例如使用Rails Simple Form gem。根据Ankit的答案+ David Brunow的评论,最好不要设置问题字段。

9
我发现“名称为=的无效表单控件不可聚焦”。还显示输入是否在<fieldset>
oscargilfc 2015年

260

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

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

form不能专注于这些元素,你必须删除required所有隐藏的投入,或实现验证功能的JavaScript来处理他们,如果你真的需要一个隐藏的输入。


7
我注意到,“ email”类型的字段设置为不显示时,也可能发生这种情况,这是Chrome尝试验证格式所引起的问题。
大卫·布鲁诺

3
它不需要requiredpattern一个人就能造成这个问题。
Pacerier,2015年

3
在我的情况下,表单字段不是type =“ hidden”,它们根本就不在视线范围内,例如在带有标签的表单中。
乔什·麦克

我有两种形式,一种同时具有<input type="hidden" required />,另一种具有<input type="text" style="display: none" required />,并且在Chrome中唯一显示错误的是display: none,而"hidden"一种可以很好地提交。
佩雷,2015年

这是正确的答案。Chrome浏览器正在尝试验证CSS中隐藏的字段。阻止了它显示其验证警告消息,并警告您这一事实。
superluminary

33

万一其他人遇到这个问题,我也会遇到同样的事情。如评论中所讨论的,这是由于浏览器试图验证隐藏字段而引起的。它正在查找表单中的空字段并尝试将其重点关注,但是因为它们被设置为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中“无效的表单控件”的重复项


6
如果您倾向于拒绝该答案,请发表评论以告知我原因。如果信息包含不良信息,我宁愿删除答案,也不要在这里留下误导社区的信息。
Horatio Alderaan 2014年

1
我不会拒绝投票,但是我觉得这段代码使用了蛮力的“掩盖问题”方法。在处理遗留代码时,它当然很有用,但是对于较新的项目,我建议您更仔细地研究您的问题。这个答案也适用于在表单标签上使用“ novalidate”,但这更加明显。+1(表示已禁用,而不是删除)。
Jonathan DeMarks 2014年

1
为了提供一些背景信息,当我遇到这个问题时,我正处于“处理旧版代码”的情况。我完全同意这是黑客。设计标记要好得多,这样您就不会遇到这种情况。但是,对于旧的代码库和不灵活的CMS系统,这并不总是可能的。上面禁用而不是使用“ novalidate”的方法是我想到的解决问题的最佳方法。
Horatio Alderaan 2014年

2
我同意禁用隐藏字段的方法。删除它们的“必需”属性会丢失信息,以备稍后显示。但是,重新启用它们将保持此状态。
Druckles

1
我喜欢这个解决方案,并且当您的表单具有基于其他输入的选定值可变显示或隐藏的输入时,我认为它很好用。这将保留所需的设置,并且仍然允许表单提交。更好的是,如果验证失败并且用户执行了完全不同的操作,则无需进行其他重置。
lewsid

17

在我的情况下,问题input type="radio" required在于隐藏于:

visibility: hidden;

如果要求的输入类型radiocheckbox具有display: none;CSS属性,还将显示此错误消息。

如果要创建自定义单选框/复选框输入,必须在其中将它们从UI中隐藏并仍保留该required属性,则应改用:

opacity: 0; CSS属性


除了我正在使用selectivity.js库的相同问题外,该库隐藏了当前选择框并显示带有js和css的替代js框。当我在其上使用required时,将引发此错误form-field.js:8 create:1名称='listing_id'的无效表单控件无法聚焦。提示我如何工作。
Inzmam ul Hassan

据我所知@InzmamGujjar,您的js插件正在使用其自己的类创建另一个select输入。也许更改插件CSS类或选择创建的输入name=""而不是原始输入?
Gus

13

以前的答案都对我没有用,并且我没有任何隐藏字段 required属性的。

在我的情况下,问题是由先有a <form>然后有a <fieldset>作为第一个孩子而引起的,该孩子拥有<input>with required属性。删除已<fieldset>解决的问题。或者您可以用它包装表格;HTML5允许使用。

我使用Windows 7 x64,Chrome版本43.0.2357.130 m。


遇到了同样的问题,谢谢提示。设法用您的解决方案解决它,这很奇怪。

谢谢,这也是我的问题。
fantasticrice

在我的情况下,这暗示帮我
安雅Ishmukhametova

2
字段集也是我的问题。就我而言,在这里找到了答案:stackoverflow.com/a/30785150/1002047 似乎是一个Chrome错误(因为所讨论的HTML使用W3C的验证器进行了验证)。只需将我的字段集更改为div即可解决此问题。
埃里克·S·布灵顿

@ EricS.Bullington感谢您指出。我不知道那个答案。作为该用户,我自己发现它“切出”了表单的一部分。顺便说一句,我不了解Chrome版本编号系统,但是4年内从124升级到130看起来并不像是一个巨大的步骤……
Pere 2015年

9

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

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

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

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

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

这也是我发现效果最好的解决方案。它允许错误消息实际显示在不可见的窗体控件附近。
罗布

8

可能是您隐藏(显示:无)具有必填属性的字段。

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


7

对我来说,发生这种情况是,当有一个<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上。


7

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


提示: $("input").attr("required", "true");或者$("input").prop('required',true);相反,您可以remove使用attribute / property。>> jQuery将必需的字段添加到输入字段中
fWd82 '18

7

对于Select2 Jquery问题

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

解决方案 您可以在表单的每个元素上插入一个事件侦听器,并将其“无效”事件注入,以便可以在HTML5 validate事件之前进行操作。

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

3

如果您具有以下代码,它将显示该消息:

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

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

我知道是一样的,我只是举一个例子,有些人他们对代码理解得更好:D
罗伯特·

3

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


1
谢谢这个主意!对我来说,切换所有有时隐藏的表单元素都是有用的,而不管是否需要单个表单元素,因此我的逻辑很好也很简单:)
Gabe Kopley

3

您可以尝试.removeAttribute("required")在窗口加载时隐藏的那些元素。因为所讨论的元素很可能由于javascript(选项卡式表单)被标记为隐藏

例如

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

这应该完成任务。

对我有用...干杯


3

当您具有包含必填字段的普通表单并提交表单,然后在提交后立即将其隐藏(使用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
  }

编辑:解释

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


3

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

当用户选择另一个实体时:$(“#periodo-container”)。show(); $('#periodo')。prop('required',true);

但是有时,在提交表单时,问题会出现:“具有name = periodo的无效表单控件”无法聚焦(我在id和name中使用了相同的值)。

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

因此,我所做的是:

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

多数民众赞成在解决我的问题...令人难以置信。



2

对于角度使用:

ng-required =“ boolean”

如果该值为true,则只会应用html5'required'属性。

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

2

我来这里是为了回答我是由于未关闭 </form>标签并且同一页面上有多个表单。第一种形式将扩展为包括寻求对来自其他地方的形式输入的验证。因为THOSE表单是隐藏的,所以它们触发了错误。

因此例如:

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

扳机

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

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

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


2

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

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

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

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

    代替这个:

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

  1. 当您不打算提交表单而不进行其他选择时,使用可以禁用必填字段。我认为这是推荐的解决方案。

    喜欢:

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

还是通过javascript / jquery代码禁用它取决于您的情况。


2

使用Angular JS时我发现了同样的问题。这是从使用造成需要加上NG-隐藏。当我在隐藏该元素的情况下单击“提交”按钮时,便发生了错误,名称为“''的无效表单控件无法聚焦。最后!

例如,与ng-hide一起使用时:

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

我通过用ng-pattern代替了必需的来解决了它。

例如解决方案:

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

1

对于在那里的其他AngularJS 1.x用户,出现此错误是因为我不需要显示控件而不是将其完全从DOM中删除,而不显示了该控件。

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

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


1

让我说一下我的情况,因为它与上述所有解决方案都不相同。我有一个HTML标记未正确关闭。该元素不是 required,但它嵌入在hiddendiv中

在我的情况下,问题出在type="datetime-local",出于某种原因在提交表单时对其进行了验证。

我改变了这个

<input type="datetime-local" />

进入那个

<input type="text" />

1

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

对我而言,它与字段集或隐藏的输入无关。

我发现如果我用过 max="5"(例如)它将产生此错误。如果我用过maxlength="5" ...没有错误。

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

我仍然不知道为什么使用该代码会产生错误,就此而言,即使我认为没有“最小”值,它也应该是有效的。


我的也可以用类似的方法解决,但是配置是min='-9999999999.99' max='9999999999.99'
里卡多·格林

0

或者,另一个简单的答案是使用HTML5占位符属性,那么就无需使用任何js验证。

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

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

希望能有所帮助。我对这种解决方案完全满意。


0

我来这里时遇到了同样的问题。对我来说(根据需要注入隐藏元素-即在工作应用中接受教育)具有必需的标志。

我意识到验证器对注入文件的触发速度比文件准备就绪的速度快,因此抱怨。

我最初的ng-required标签是使用可见性标签(vm.flags.hasHighSchool)。

我通过创建专用标志来解决,以设置所需的ng-required =“ vm.flags.highSchoolRequired == true”

我在设置该标志时添加了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>

您的解决方案实际上是非常非常危险的。cpu速度慢的任何人仍然会遇到相同的错误。这是(或将是)典型的比赛条件。可能是旧的智能手机可能会受到影响。因此,请谨慎使用此解决方案。
Drachenfels 2015年


0

我发生此错误是因为我提交的表单中未填写必填字段。

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

要解决此问题,请确保您控制了必填字段。


0

这是因为表单中存在带有必填属性的隐藏输入。

就我而言,我有一个选择框,它被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 opacity
    opacity: 0;
    height: 0px;

 }

0

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

(我有一个部分完整的表单,其中已插入一个模板,然后修改了该模板)

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

在运行验证之前,我找不到任何可以迫使表单重新评估自身的方法(希望它将摆脱对现在不存在的旧字段的任何引用)。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.