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

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

这来自JavaScript控制台。

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

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


当前回答

就我而言…

Ng-show被利用了。 Ng-if被放到了它的位置,修复了我的错误。

其他回答

如果您在复选框输入上得到错误,则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认并替换为一些其他样式,这也将触发不可聚焦错误在Chrome验证错误。

我发现这在我的样式表:

input[type="checkbox"] {
    visibility: hidden;
}

简单的解决方法是用这个替换它:

input[type="checkbox"] {
    opacity: 0;
}

在克隆HTML元素用于表单时,我收到了相同的错误。

(我有一个部分完整的表单,其中有一个模板注入其中,然后模板被修改)

错误是引用原始字段,而不是克隆版本。

我找不到任何方法可以在运行验证之前强制表单重新计算自身(希望它能摆脱对现在不存在的旧字段的任何引用)。

为了解决这个问题,我从原始元素中删除了必需的属性,并在将其注入表单之前动态地将其添加到克隆字段中。表单现在正确地验证克隆和修改的字段。

在您的表单输入中。你把需要的保存在隐藏输入中,这就是为什么它抛出:

An invalid form control with name='' is not focusable

检查抛出无效的输入名称,您将其隐藏并保留为必需的。

只需从隐藏的输入名称中删除所需的。完成了。

当你向输入字段提供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');

对我来说,问题是在div中输入类型电子邮件的可见性:隐藏,类似这样的东西

<form>
  <div style="visibility: hidden;">
  <input type="email" name="email" id="email">
  ............
</form>

然后你可以改变type="email"为type="text"或删除可见性:隐藏;