在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:

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

这来自JavaScript控制台。

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

谁得到这个错误似乎是随机的。 有谁知道解决办法吗?


当前回答

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

其他回答

以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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.
});

此外,这可能是重复的“无效的窗体控件”只有在谷歌Chrome

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

(我有一个部分完整的表单,其中有一个模板注入其中,然后模板被修改)

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

我找不到任何方法可以在运行验证之前强制表单重新计算自身(希望它能摆脱对现在不存在的旧字段的任何引用)。

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

在我的情况下,问题是输入类型="radio"需要隐藏:

可见性:隐藏;

此错误消息还将显示所需的输入类型单选或复选框是否有显示:none;CSS属性。

如果你想创建自定义的单选/复选框输入,它们必须从UI中隐藏,并且仍然保持所需的属性,你应该使用:

透明度:0;CSS属性

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

<form name="myform" novalidate>

如果你有这样的代码,它会显示这条消息:

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

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