在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
你可以禁用HTML5验证,如果你不想要它在其他回复中提到。 但如果你仍然需要HTML5验证,你可以向提交按钮添加一个“click”事件监听器来显示隐藏字段。click事件将使字段可见,验证不再抛出错误。
其他回答
奇怪的是,每个人都建议删除验证,而验证的存在是有原因的…… 不管怎样,如果你在使用一个自定义控件,并且想要维护验证,你可以这样做:
第一步。从输入中删除无显示,因此输入变得可聚焦
.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();
}
});
当你向输入字段提供style="display: none;"和required属性时,这个问题就会发生,并且在提交时会进行验证。 例如:
<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');
使用ElementInternals API的自定义元素元素不能使用delegatesFocus: true与shadowRoot,因为元素必须直接接收焦点(目前,这可能会发展)在公开的表单的DOM树(父表单可以在shadowRoot,它只是必须在同一部分的树与自定义和其他表单元素);元素必须是可见的,在我的实验中tabindex=0是必需的元素(-1似乎也工作)
一个从googlchrome扩展的带有自定义元素的演示在https://jimmont.github.io/samples/report-validity/
the error is simply reporting that an element which has attributes indicating it needs validation cannot receive focus when there's a problem with the validation, so the user can correct the error; if the error and information is coming in as expected you can ignore the error; otherwise it's likely the result of some UI features hiding elements and a mix of unexpected behavior; it's possible to use another approach in implementations to allow the user to walk back through a flow of some sort, but it appears that's beyond the scope of the question at the moment
对于其他AngularJS 1。x个用户在那里,这个错误出现是因为我隐藏了一个窗体控件显示,而不是完全从DOM中删除它时,我不需要控件完成。
我通过在包含需要验证的表单控件的div上使用ng-if而不是ng-show/ng-hide来修复这个问题。
希望这能帮助到你的边缘情况用户。
或者另一个万无一失的答案是使用HTML5占位符属性,那么就不需要使用任何js验证。
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
Chrome将无法找到任何空的,隐藏的和需要关注的元素。简单的解决方案。
希望这能有所帮助。我完全接受这个解决方案。