在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
在克隆HTML元素用于表单时,我收到了相同的错误。
(我有一个部分完整的表单,其中有一个模板注入其中,然后模板被修改)
错误是引用原始字段,而不是克隆版本。
我找不到任何方法可以在运行验证之前强制表单重新计算自身(希望它能摆脱对现在不存在的旧字段的任何引用)。
为了解决这个问题,我从原始元素中删除了必需的属性,并在将其注入表单之前动态地将其添加到克隆字段中。表单现在正确地验证克隆和修改的字段。
其他回答
在表单中添加novalidate属性将有助于:
<form name="myform" novalidate>
我在使用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" >
对于其他AngularJS 1。x个用户在那里,这个错误出现是因为我隐藏了一个窗体控件显示,而不是完全从DOM中删除它时,我不需要控件完成。
我通过在包含需要验证的表单控件的div上使用ng-if而不是ng-show/ng-hide来修复这个问题。
希望这能帮助到你的边缘情况用户。
我经常看到有人问这个问题,我自己也遇到过这个“错误”。甚至有链接质疑这是否是Chrome的一个真正的错误。 这是当一个或多个表单输入类型元素被隐藏并且这些元素具有最小/最大限制(或其他一些验证限制)时发生的响应。
在创建表单时,元素没有赋值,之后元素值可能会被填充或保持不变。 在提交时,表单将被解析,任何超出这些验证限制的隐藏元素将向控制台抛出这个“错误”,提交将失败。因为您不能访问这些元素(因为它们是隐藏的),所以这是唯一有效的响应。
这不是一个实际的错误或错误。这表示有一些即将提交的元素值超出了一个或多个元素规定的限制。
为了解决这个问题,在表单提交之前的任何时候,为隐藏在表单中的任何元素分配一个有效的默认值,那么这些“错误”将永远不会发生。它本身并不是一个bug,它只是迫使您养成更好的编程习惯。
注意:如果您希望将这些值设置为验证限制之外的值,请使用form。addEventListener('submit', myFunction)来拦截'submit'事件,并在"myFunction"中填充这些元素。似乎验证检查是在“myFunction()”被调用之前执行的。
对于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);
});