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

Question

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

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

这是来自JavaScript控制台.

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

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

Answer 1

陈述是不够的

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

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

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

Chrome希望专注于所需的控件,但仍然是空的,以便它可以弹出消息"请填写此字段".但是,如果控件在Chrome想要弹出消息时隐藏,即在提交表单时,Chrome无法专注于控件,因为它是隐藏的,因此表单不会提交.

因此,为了解决这个问题,当javascript隐藏控件时,我们还必须从该控件中删除"required"属性.

为了充分利用警告,请考虑这一点 - 在验证失败时不要隐藏字段.但这不是一个严格的规则,也不是一个规则.正如我在下面的评论中提到的,我解释道

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

更新:2015年8月21日

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

Answer 2

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

<form name="myform" novalidate>

Answer 3

在你的form,你可能已经隐藏input其required属性:

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

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

Answer 4

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

Answer 5

当您提供 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');

Answer 6

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

visibility: hidden;

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

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

opacity: 0; CSS属性

Answer 7

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

对我来说,这个问题是由具有引起的<form>,然后<fieldset>作为其第一个孩子,其持有的<input>与required属性.删除<fieldset>解决了问题.或者你可以用它包装你的表格; 它是HTML5允许的.

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

Answer 8

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

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

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

Answer 9

可能是您使用required属性隐藏(display:none)字段.

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

Answer 10

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

考虑下面的例子，

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

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

Answer 11

对我来说,当有一个<select>带有预先选择的选项的字段为'' 时,会发生这种情况:

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

不幸的是,它是占位符唯一的跨浏览器解决方案(如何为'select'框创建占位符？).

问题出现在Chrome 43.0.2357.124上.

Answer 12

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

Answer 13

如果您在复选框输入上收到错误,还有另一种可能性.如果您的复选框使用的隐藏的默认,并与一些其他的造型替代它的自定义CSS,这也将触发验证错误在Chrome中不可作为焦点误差.

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

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

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

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

Answer 14

对于Select2 Jquery问题

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

解决方案 您可以为表单的每个元素注入一个事件监听器和'invalid'事件,以便您可以在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);          
});

Answer 15

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

Answer 16

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

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 代码禁用它取决于您的场景。

Answer 17

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

第一步。从输入中删除 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();
   }
});