名称=''的无效表单控件不可聚焦-Java 学习之路

511

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

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

这是来自JavaScript控制台 .

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

这个错误似乎是随机的 . 有没有人知道解决方案？

30 回答

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上 .
回复于 2024-04-28T04:22:50+08:00
611

陈述是不够的

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

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

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

Chrome希望专注于所需的控件，但仍然是空的，以便它可以弹出消息“请填写此字段” . 但是，如果控件在Chrome想要弹出消息时隐藏，即在提交表单时，Chrome无法专注于控件，因为它是隐藏的，因此表单不会提交 . 因此，为了解决这个问题，当javascript隐藏控件时，我们还必须从该控件中删除“required”属性 .

为了充分利用警告，请考虑这个 - don't hide a field when it fails validation . 但这不是一个严格的规则，也不是一个规则 . 正如我在下面的评论中提到的，我解释道

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

更新：2015年8月21日

由于过早验证，也可能出现错误 . 如果没有set type 属性的 <button> 输入，则可能会发生过早验证 . 如果没有将按钮的type属性设置为按钮，Chrome（或任何其他浏览器）会在每次单击按钮时执行验证，因为 submit 是默认的按钮类型 . 要解决此问题，如果您的页面上有一个按钮除了 submit 或 reset 之外的其他内容，请务必记住： <button type="button">

回复于 2024-04-28T04:22:50+08:00
25
向表单添加 novalidate 属性将有助于：
```
<form name="myform" novalidate>
```
回复于 2024-04-28T04:22:50+08:00
7
在您的表单中，您可能隐藏了具有必需属性的输入 .
```
<input type="hidden" required />
```
因此，表单无法关注该元素，您必须从所有隐藏的输入中删除 required .
回复于 2024-04-28T04:22:50+08:00

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

回复于 2024-04-28T04:22:50+08:00

1

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

visibility: hidden;

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

如果你想 create custom radio/checkbox inputs where they must be hidden from the UI 仍然保留 required 属性，你应该使用：

opacity: 0; CSS属性

回复于 2024-04-28T04:22:50+08:00
323

之前的答案都不适用于我，并且我没有 required 属性的任何隐藏字段 .

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

我使用的是Windows 7 x64，Chrome版本43.0.2357.130米 .

回复于 2024-04-28T04:22:50+08:00
1

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

回复于 2024-04-28T04:22:50+08:00

For Select2 Jquery problem

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

Solution 您可以在表单的每个元素上注入事件监听器和'invalid'事件，以便您可以在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);          
});

回复于 2024-04-28T04:22:50+08:00

5

可能是您使用 required 属性隐藏（display：none）字段 .

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

回复于 2024-04-28T04:22:50+08:00
6
如果您在复选框输入上收到错误，还有另一种可能性 . 如果您的复选框使用隐藏默认值的自定义CSS并将其替换为其他样式，则这也会在验证错误时触发Chrome中无法解决的错误 .

我在样式表中找到了这个：
```
input[type="checkbox"] {
    visibility: hidden;
}
```
简单的解决方法是将其替换为：
```
input[type="checkbox"] {
    opacity: 0;
}
```
回复于 2024-04-28T04:22:50+08:00
0

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

回复于 2024-04-28T04:22:50+08:00
13
当你有一个包含必填字段的普通表单并提交表单然后在提交后直接隐藏它（使用javascript），没有时间让验证功能工作时，另一个可能的原因并没有涵盖在所有以前的答案中 .

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

Edit:

要处理这种情况，只需在提交处理程序中添加以下条件
```
submitHandler() {
    const form = document.body.querySelector('#formId');

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

    // Submit and hide form safely
  }
```
Edit: Explanation

假设您在提交时隐藏了表单，此代码保证在表单生效之前不会隐藏表单/字段 . 因此，如果某个字段无效，浏览器可以专注于它而没有任何问题，因为仍然显示该字段 .
回复于 2024-04-28T04:22:50+08:00
3
对于角度使用：

NG-需要= “布尔”

如果值为true，这将仅应用html5'required'属性 .
```
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
```
回复于 2024-04-28T04:22:50+08:00
6
对于那些在窗口加载时隐藏的元素，您可以尝试使用 .removeAttribute("required") . 由于javascript（标签形式）很有可能将相关元素标记为隐藏

例如
```
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}
```
这应该完成任务 .

它对我有用......干杯
回复于 2024-04-28T04:22:50+08:00
2

在我的情况下..

ng-show 正在使用中 .
ng-if 被置于其位置并修复了我的错误 .

回复于 2024-04-28T04:22:50+08:00

206

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

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

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

回复于 2024-04-28T04:22:50+08:00

0
我来到这里回答说我自己触发了这个问题是基于不关闭 </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'的无效表单控件不可聚焦 . 名称='密码'的无效表单控件不可聚焦 . 名称='confirm'的无效表单控件不可调焦 .
回复于 2024-04-28T04:22:50+08:00
1
还有一些东西让我感到惊讶......我有一个表单，它有两个不同实体的动态行为 . 一个实体需要一些其他实体不需要的字段 . 所以，我的JS代码，取决于实体，做类似的事情：$（'＃periodo'） . removeAttr（'required'）; $（ “＃periodo容器”）隐藏（）;

当用户选择另一个实体时：$（“＃periodo-container”） . show（）; $（'＃periodo'） . prop（'required'，true）;

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

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

所以，我做的是：
```
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide
```
多数民众赞成解决了我的问题...令人难以置信 .
回复于 2024-04-28T04:22:50+08:00
0
有很多方法可以解决这个问题
- 为表单添加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">
- Use can disable the required fields when you are not going to submit the form instead of doing some other option. This is the recommended solution in my opinion.
喜欢：

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

或通过javascript / jquery代码依赖于您的方案禁用它 .
回复于 2024-04-28T04:22:50+08:00
12
我在使用Angular JS时发现了同样的问题 . 它是由于需要与ng-hide一起使用而引起的 . 当我隐藏此元素时单击提交按钮然后发生错误名称为'''的无效表单控件不可聚焦 . 最后！

例如，与所需的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" >
```
回复于 2024-04-28T04:22:50+08:00
3
另外，另一个简单的答案是使用HTML5占位符属性，然后就不需要使用任何js验证 .
```
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
```
Chrome无法找到要关注的任何空白，隐藏和必需元素 . 简单解决方案

希望有所帮助 . 我完全按照这个解决方案排序 .
回复于 2024-04-28T04:22:50+08:00
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>
```
回复于 2024-04-28T04:22:50+08:00
0

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

回复于 2024-04-28T04:22:50+08:00
0

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

产生错误的原因是浏览器试图关注所需的字段以警告用户需要字段，但这些必填字段隐藏在display none div中，因此浏览器无法关注它们 . 我从一个可见的选项卡提交，所需的字段在隐藏的选项卡中，因此错误 .

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

回复于 2024-04-28T04:22:50+08:00
2
这是因为表单中有一个带必需属性的隐藏输入 .

在我的例子中，我有一个选择框，它被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;

 }
```
回复于 2024-04-28T04:22:50+08:00
-1

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

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

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

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

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

回复于 2024-04-28T04:22:50+08:00
0
我希望在这个冗长的答案种子中不会遗漏的情景真的很奇怪 .

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

简而言之，div ids有
```
<div id="name${instance.username}"/>
```
我有一个用户：测试帐户，由于某种原因，编码在java脚本世界中做了一些奇怪的事情 . 我收到了在其他地方工作的表单的错误消息 .

把它缩小到这个并重新测试使用数字而不是像id似乎可以解决这个问题 .
回复于 2024-04-28T04:22:50+08:00
7

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

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

希望这可以帮助你的边缘案例用户 .

回复于 2024-04-28T04:22:50+08:00

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

回复于 2024-04-28T04:22:50+08:00

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

30 回答

更新：2015年8月21日

相关问题