在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
对于Angular来说:
ng-required =“布尔”
如果值为true,这将只应用html5 'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
其他回答
有很多方法可以解决这个问题
添加novalidate到你的表单,但这是完全错误的,因为它将删除表单验证,这将导致用户输入错误的信息。
<表单操作=“....” class=“付款详细信息” 方法=“post” novalidate>
Use可以从必填字段中删除必填属性,这也是错误的,因为它将再次删除表单验证。 而不是这样:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="第一行地址" type="text" required="required">
Use this:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="第一行地址" type="text">
当您不打算提交表单而不是执行其他选项时,Use可以禁用必填字段。这是我建议的解决方案。 如:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="第一行地址" type="text" disabled="disabled">
或者通过javascript / jquery代码禁用它取决于你的场景。
以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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
您可以尝试. removeattribute ("required")用于那些在窗口加载时隐藏的元素。因为很有可能由于javascript(选项卡表单),所讨论的元素被标记为隐藏
e.g.
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
这应该可以完成任务。
这对我很管用……干杯
如果您在复选框输入上得到错误,则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认并替换为一些其他样式,这也将触发不可聚焦错误在Chrome验证错误。
我发现这在我的样式表:
input[type="checkbox"] {
visibility: hidden;
}
简单的解决方法是用这个替换它:
input[type="checkbox"] {
opacity: 0;
}
在您的表单输入中。你把需要的保存在隐藏输入中,这就是为什么它抛出:
An invalid form control with name='' is not focusable
检查抛出无效的输入名称,您将其隐藏并保留为必需的。
只需从隐藏的输入名称中删除所需的。完成了。