在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
确保表单中具有所需属性的所有控件也具有name属性集
其他回答
另一个可能的原因,并没有涵盖在所有前面的答案,当你有一个正常的表单与必填字段,你提交了表单,然后隐藏它直接提交(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
}
编辑:解释
假设在提交表单时隐藏表单,这段代码保证表单/字段在表单生效之前不会被隐藏。因此,如果一个字段无效,浏览器可以将焦点集中在它上,因为该字段仍然显示。
就我而言…
Ng-show被利用了。 Ng-if被放到了它的位置,修复了我的错误。
对于Angular来说:
ng-required =“布尔”
如果值为true,这将只应用html5 'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
如果您在复选框输入上得到错误,则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认并替换为一些其他样式,这也将触发不可聚焦错误在Chrome验证错误。
我发现这在我的样式表:
input[type="checkbox"] {
visibility: hidden;
}
简单的解决方法是用这个替换它:
input[type="checkbox"] {
opacity: 0;
}
对我来说,这发生了,当有一个<select>字段与预选选项的值“:
<select name="foo" required="required">
<option value="" selected="selected">Select something</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
不幸的是,它是占位符的唯一跨浏览器解决方案(我如何为“选择”框做一个占位符?)
Chrome 43.0.2357.124出现此问题。