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

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

这来自JavaScript控制台。

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

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


当前回答

我在使用Angular JS时也发现了同样的问题。这是由于与ng-hide一起使用required引起的。当我点击提交按钮,而这个元素是隐藏的,然后发生错误,无效的窗体控件与名称= "是不可聚焦的。终于!

例如,将ng-hide和required一起使用:

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

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

例如解决方案:

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

其他回答

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

<form name="myform" novalidate>

对于其他AngularJS 1。x个用户在那里,这个错误出现是因为我隐藏了一个窗体控件显示,而不是完全从DOM中删除它时,我不需要控件完成。

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

希望这能帮助到你的边缘情况用户。

不仅仅是当指定需要时,我也得到了这个问题时,使用最小值和最大值。

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

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

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

就我而言…

Ng-show被利用了。 Ng-if被放到了它的位置,修复了我的错误。