在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
对我来说,这发生了,当有一个<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出现此问题。
其他回答
如果隐藏具有必填属性的输入元素,就会发生这种情况。
不使用display:none,你可以使用不透明度:0;
我还必须使用一些CSS规则(如position:absolute)来完美地定位我的元素。
另一个可能的原因,并没有涵盖在所有前面的答案,当你有一个正常的表单与必填字段,你提交了表单,然后隐藏它直接提交(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
}
编辑:解释
假设在提交表单时隐藏表单,这段代码保证表单/字段在表单生效之前不会被隐藏。因此,如果一个字段无效,浏览器可以将焦点集中在它上,因为该字段仍然显示。
前面的答案都不适合我,而且我没有任何具有必需属性的隐藏字段。
在我的例子中,问题是由于有一个<form>和一个<fieldset>作为它的第一个子元素,它包含了具有所需属性的<input>。删除<fieldset>解决了这个问题。或者你可以用它来包装你的表单;HTML5是允许的。
我使用的是Windows 7 x64, Chrome版本43.0.2357.130 m。
我在使用Angular JS时也发现了同样的问题。这是由于与ng-hide一起使用required引起的。当我点击提交按钮,而这个元素是隐藏的,然后发生错误,无效的窗体控件与名称= "是不可聚焦的。终于!
例如,将ng-hide和required一起使用:
<input type="text" ng-hide="for some condition" required something >
我通过用ng-pattern代替所需的来解决它。
例如解决方案:
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
这个问题发生在Chrome上,如果一个表单字段验证失败,但由于各自的无效控件无法聚焦,浏览器试图显示消息“请填写此字段”旁边也失败了。
由于多种原因,表单控件在触发验证时可能无法聚焦。下面描述的两种情况是最突出的原因:
The field is irrelevant according to the current context of the business logic. In such a scenario, the respective control should be disabled or removed from the DOM or not be marked with the required attribute at that point. Premature validation may occur due to a user pressing ENTER key on an input. Or a user clicking on a button/input control in the form which has not defined the type attribute of the control correctly. If the type attribute of a button is not set to button, Chrome (or any other browser for that matter) performs a validation each time the button is clicked because submit is the default value of a button's type attribute.
为了解决这个问题,如果你的页面上有一个按钮是做其他事情而不是提交或重置,请记住这样做:<button type="button">。