在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
这发生在我身上,因为我正在使用Materialize JS/CSS框架。当我在物化表单中创建<select>字段时,它被转换为具有许多风格化字段的托管字段,而真正的<select>字段被框架隐藏,仅用于向post请求传递所选值。
因此,它将始终显示控制台错误,除非我使用浏览器默认类使<select>字段的Materialize管理无效。
另一种方法是使用一个带有type="button"而不是type="submit"的按钮,并使用$('form').submit()来发送表单,但您将失去浏览器验证UI,必须开发自己的UI,或者使用框架的UI。
其他回答
确保表单中具有所需属性的所有控件也具有name属性集
以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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
对我来说,这发生了,当有一个<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出现此问题。
对于Angular来说:
ng-required =“布尔”
如果值为true,这将只应用html5 'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
这是因为表单中有一个带有required属性的隐藏输入。
在我的情况下,我有一个选择框,它是隐藏的jquery tokenizer使用内联风格。如果我没有选择任何令牌,浏览器在表单提交时抛出上述错误。
所以,我用下面的css技术修复了它:
select.download_tag{
display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
//So, instead set opacity
opacity: 0;
height: 0px;
}