在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
以防其他人有这个问题,我也经历过同样的事情。正如评论中所讨论的,这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上,但是因为它们被设置为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
其他回答
有很多方法可以解决这个问题
添加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
奇怪的是,每个人都建议删除验证,而验证的存在是有原因的…… 不管怎样,如果你在使用一个自定义控件,并且想要维护验证,你可以这样做:
第一步。从输入中删除无显示,因此输入变得可聚焦
.input[required], .textarea[required] {
display: inline-block !important;
height: 0 !important;
padding: 0 !important;
border: 0 !important;
z-index: -1 !important;
position: absolute !important;
}
第二步骤。如果样式不够,则在特定情况下的输入上添加无效事件处理程序
inputEl.addEventListener('invalid', function(e){
//if it's valid, cancel the event
if(e.target.value) {
e.preventDefault();
}
});
这是因为表单中有一个带有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;
}
哇,这里有这么多答案!
如果问题是<input type="hidden" required="true" />,那么只需几行就可以解决这个问题。
逻辑简单明了:
在页面加载中用数据必需类标记每个必需输入。 在提交时,做两件事:a)在所有数据必需输入中添加required="true"。b)从所有隐藏的输入中删除required="true" '。
HTML
<input type="submit" id="submit-button">
纯JavaScript
document.querySelector('input,textarea,select').filter('[required]').classList.add('data-required');
document.querySelector('#submit-button').addEventListener('click', function(event) {
document.querySelector('.data-required').prop('required', true);
document.querySelector('input,textarea,select').filter('[required]:hidden').prop('required', false);
return true;
}
jQuery
$('input,textarea,select').filter('[required]').addClass('data-required');
$('#submit-button').on('click', function(event) {
$('.data-required').prop('required', true);
$('input,textarea,select').filter('[required]:hidden').prop('required', false);
return true;
}