在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
在我的情况下,问题是输入类型="radio"需要隐藏:
可见性:隐藏;
此错误消息还将显示所需的输入类型单选或复选框是否有显示:none;CSS属性。
如果你想创建自定义的单选/复选框输入,它们必须从UI中隐藏,并且仍然保持所需的属性,你应该使用:
透明度:0;CSS属性
其他回答
前面的答案都不适合我,而且我没有任何具有必需属性的隐藏字段。
在我的例子中,问题是由于有一个<form>和一个<fieldset>作为它的第一个子元素,它包含了具有所需属性的<input>。删除<fieldset>解决了这个问题。或者你可以用它来包装你的表单;HTML5是允许的。
我使用的是Windows 7 x64, Chrome版本43.0.2357.130 m。
在你的表单中,你可能有隐藏的输入需要的属性:
<input type="hidden" required /> <input type="file" required style="display: none;"/>
表单不能专注于这些元素,你必须从所有隐藏的输入中删除required,或者在javascript中实现一个验证函数来处理它们,如果你真的需要一个隐藏的输入。
以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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
不仅仅是在其他答案中提到的必填项。这也是由于将<input>字段放置在隐藏的<div>中导致的,该字段持有无效值。
考虑下面的例子,
<div style="display:none;">
<input type="number" name="some" min="1" max="50" value="0">
</div>
这将抛出相同的错误。所以确保<input>字段隐藏<div>不持有任何无效值。
你可以禁用HTML5验证,如果你不想要它在其他回复中提到。 但如果你仍然需要HTML5验证,你可以向提交按钮添加一个“click”事件监听器来显示隐藏字段。click事件将使字段可见,验证不再抛出错误。