在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
有很多方法可以解决这个问题
添加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代码禁用它取决于你的场景。
其他回答
在你的表单中,你可能有隐藏的输入需要的属性:
<input type="hidden" required /> <input type="file" required style="display: none;"/>
表单不能专注于这些元素,你必须从所有隐藏的输入中删除required,或者在javascript中实现一个验证函数来处理它们,如果你真的需要一个隐藏的输入。
对我来说,这发生了,当有一个<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;,所以它不能。因此出现了错误。
我可以用类似的方法来解决这个问题:
$("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
对于Angular来说:
ng-required =“布尔”
如果值为true,这将只应用html5 'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
我也是带着同样的问题来的。对我来说(在需要的时候注入隐藏元素——比如在工作应用程序中接受教育)有必要的标志。
我意识到,验证器对注入文件的启动速度比文档准备好还要快,因此它会报错。
我最初的ng-required标记使用可见性标记(vm.flags.hasHighSchool)。
我通过创建一个专用标志来设置required来解决这个问题 ng-required = " vm.flags。highSchoolRequired == true"
我添加了一个10ms的回调设置标志,问题解决了。
vm.hasHighSchool = function (attended) {
vm.flags.hasHighSchool = attended;
applicationSvc.hasHighSchool(attended, vm.application);
setTimeout(function () {
vm.flags.highSchoolRequired = true;;
}, 10);
}
Html:
<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>