在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:

name= "无效的窗体控件不可聚焦。

这来自JavaScript控制台。

我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。

谁得到这个错误似乎是随机的。 有谁知道解决办法吗?


当前回答

我来说明一下我的情况,因为它不同于上面所有的解。我有一个html标签没有正确关闭。元素不是必需的,但它嵌入在一个隐藏的div中

在我的案例中,问题在于type="datetime-local",出于某种原因,它在表单提交时被验证。

我改变了这个

<input type="datetime-local" />

<input type="text" />

其他回答

在表单中添加novalidate属性将有助于:

<form name="myform" novalidate>

对于Angular来说:

ng-required =“布尔”

如果值为true,这将只应用html5 'required'属性。

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

不仅仅是在其他答案中提到的必填项。这也是由于将<input>字段放置在隐藏的<div>中导致的,该字段持有无效值。

考虑下面的例子,

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div> 

这将抛出相同的错误。所以确保<input>字段隐藏<div>不持有任何无效值。

这个错误发生在我身上,因为我提交了一个没有填写必填字段的表单。

产生此错误是因为浏览器试图集中在必填字段上,以警告用户这些字段是必填字段,但这些必填字段隐藏在一个display none div中,因此浏览器无法集中在它们上。我从一个可见的选项卡提交,所需的字段是在一个隐藏的选项卡,因此出现错误。

要解决这个问题,请确保您控制的必填字段已填满。

以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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