在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
如果您有任何具有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" >
另一个可能的原因,并没有涵盖在所有前面的答案,当你有一个正常的表单与必填字段,你提交了表单,然后隐藏它直接提交(javascript)没有时间验证功能的工作。
验证功能将尝试集中在必需的字段上并显示错误验证消息,但该字段已被隐藏,因此出现“name= " is not focusable."的无效表单控件!
编辑:
要处理这种情况,只需在提交处理程序中添加以下条件
submitHandler() {
const form = document.body.querySelector('#formId');
// Fix issue with html5 validation
if (form.checkValidity && !form.checkValidity()) {
return;
}
// Submit and hide form safely
}
编辑:解释
假设在提交表单时隐藏表单,这段代码保证表单/字段在表单生效之前不会被隐藏。因此,如果一个字段无效,浏览器可以将焦点集中在它上,因为该字段仍然显示。
在表单中添加novalidate属性将有助于:
<form name="myform" novalidate>
以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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
我想在这里回答,因为没有这些答案,或任何其他谷歌结果解决了我的问题。
对我来说,它与字段集或隐藏输入无关。
我发现,如果我使用max="5"(例如),它会产生这个错误。如果我使用maxlength="5"…没有错误。
我能够重现错误和清除错误几次。
我仍然不知道为什么使用该代码会产生错误,就这一点而言,它应该是有效的,即使没有“最小值”,我相信。