在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
对于其他AngularJS 1。x个用户在那里,这个错误出现是因为我隐藏了一个窗体控件显示,而不是完全从DOM中删除它时,我不需要控件完成。
我通过在包含需要验证的表单控件的div上使用ng-if而不是ng-show/ng-hide来修复这个问题。
希望这能帮助到你的边缘情况用户。
其他回答
这发生在我身上,因为我正在使用Materialize JS/CSS框架。当我在物化表单中创建<select>字段时,它被转换为具有许多风格化字段的托管字段,而真正的<select>字段被框架隐藏,仅用于向post请求传递所选值。
因此,它将始终显示控制台错误,除非我使用浏览器默认类使<select>字段的Materialize管理无效。
另一种方法是使用一个带有type="button"而不是type="submit"的按钮,并使用$('form').submit()来发送表单,但您将失去浏览器验证UI,必须开发自己的UI,或者使用框架的UI。
对我来说,这发生了,当有一个<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出现此问题。
对于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);
});
如果您在复选框输入上得到错误,则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认并替换为一些其他样式,这也将触发不可聚焦错误在Chrome验证错误。
我发现这在我的样式表:
input[type="checkbox"] {
visibility: hidden;
}
简单的解决方法是用这个替换它:
input[type="checkbox"] {
opacity: 0;
}
如果隐藏具有必填属性的输入元素,就会发生这种情况。
不使用display:none,你可以使用不透明度:0;
我还必须使用一些CSS规则(如position:absolute)来完美地定位我的元素。