在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
哇,这里有这么多答案!
如果问题是<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;
}
其他回答
有些事情仍然让我感到惊讶……我有一个具有两个不同实体的动态行为的表单。一个实体需要一些其他实体不需要的字段。 所以,我的JS代码,取决于实体,做一些类似的事情: $ (' # periodo ') .removeAttr(“需要”); $ (" # periodo-container ") hide ();
当用户选择另一个实体时: $ (" # periodo-container "),告诉(); $ (" # periodo”)。道具(“需要”,真正的);
但有时,当提交表单时,会出现问题:“name=periodo的无效表单控件”不可聚焦(我对id和名称使用相同的值)。
要解决这个问题,您必须确保您正在设置或删除'required'的输入始终可见。
所以,我所做的是:
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required');
$("#periodo-container").hide(); //then hide
这解决了我的问题…难以置信。
您可以尝试. removeattribute ("required")用于那些在窗口加载时隐藏的元素。因为很有可能由于javascript(选项卡表单),所讨论的元素被标记为隐藏
e.g.
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
这应该可以完成任务。
这对我很管用……干杯
<input type="submit" name="btnSave" value="Update" id="btnSave" formnovalidate="formnovalidate">
formnovalidate=“formnovalidate”
当你向输入字段提供style="display: none;"和required属性时,这个问题就会发生,并且在提交时会进行验证。 例如:
<input type="text" name="name" id="name" style="display: none;" required>
这个问题可以通过从HTML的输入字段中删除所需的属性来解决。如果需要添加所需属性,请动态添加。如果你正在使用JQuery,请使用下面的代码:
$("input").prop('required',true);
如果需要动态删除该字段,
$("input").prop('required',false);
如果你不使用JQuery,你也可以使用纯Javascript:
document.getElementById('element_id').removeAttribute('required');
奇怪的是,每个人都建议删除验证,而验证的存在是有原因的…… 不管怎样,如果你在使用一个自定义控件,并且想要维护验证,你可以这样做:
第一步。从输入中删除无显示,因此输入变得可聚焦
.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();
}
});