在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
它可以是你有隐藏(display: none)字段和必需的属性。
请检查所有必填字段是否对用户可见:)
其他回答
在你的表单中,你可能有隐藏的输入需要的属性:
<input type="hidden" required /> <input type="file" required style="display: none;"/>
表单不能专注于这些元素,你必须从所有隐藏的输入中删除required,或者在javascript中实现一个验证函数来处理它们,如果你真的需要一个隐藏的输入。
另一个可能的原因,并没有涵盖在所有前面的答案,当你有一个正常的表单与必填字段,你提交了表单,然后隐藏它直接提交(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
}
编辑:解释
假设在提交表单时隐藏表单,这段代码保证表单/字段在表单生效之前不会被隐藏。因此,如果一个字段无效,浏览器可以将焦点集中在它上,因为该字段仍然显示。
哇,这里有这么多答案!
如果问题是<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;
}
前面的答案都不适合我,而且我没有任何具有必需属性的隐藏字段。
在我的例子中,问题是由于有一个<form>和一个<fieldset>作为它的第一个子元素,它包含了具有所需属性的<input>。删除<fieldset>解决了这个问题。或者你可以用它来包装你的表单;HTML5是允许的。
我使用的是Windows 7 x64, Chrome版本43.0.2357.130 m。
您可以尝试. removeattribute ("required")用于那些在窗口加载时隐藏的元素。因为很有可能由于javascript(选项卡表单),所讨论的元素被标记为隐藏
e.g.
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
这应该可以完成任务。
这对我很管用……干杯