我的网站上有一个严重的问题。在Google Chrome浏览器中,某些客户无法进入我的付款页面。尝试提交表单时出现此错误:
An invalid form control with name='' is not focusable.
这来自JavaScript控制台。
我读到问题可能是由于隐藏字段具有必填属性。现在的问题是,我们使用的是.net Webforms必需的字段验证器,而不是html5必需的属性。
似乎谁得到此错误是随机的。有谁知道解决方案吗?
我的网站上有一个严重的问题。在Google Chrome浏览器中,某些客户无法进入我的付款页面。尝试提交表单时出现此错误:
An invalid form control with name='' is not focusable.
这来自JavaScript控制台。
我读到问题可能是由于隐藏字段具有必填属性。现在的问题是,我们使用的是.net Webforms必需的字段验证器,而不是html5必需的属性。
似乎谁得到此错误是随机的。有谁知道解决方案吗?
Answers:
如果表单字段验证失败,则在Chrome上会发生此问题,但是由于相应的无效控件无法聚焦,浏览器尝试在其旁边显示消息“请填写此字段”的尝试也失败了。
由于多种原因,在触发验证时,表单控件可能无法聚焦。下列两种情况是最主要的原因:
根据业务逻辑的当前上下文,该字段不相关。在这种情况下,应该从DOM中删除相应的控件,或者此时不应该用required
属性标记该控件。
由于用户按输入上的ENTER键,可能会发生过早验证。或者用户单击按钮/输入控件的形式尚未type
正确定义控件的属性。如果按钮的type属性未设置为button
,则Chrome(或与此相关的任何其他浏览器)每次单击按钮都会执行一次验证,因为这submit
是按钮type
属性的默认值。
要解决该问题,如果页面上有一个按钮除了执行提交或重置操作外还执行其他操作,请始终记住执行以下操作:<button type="button">
。
required
或添加novalidate
从来都不是一个好的解决方法。
number
字段,其中默认值不能按步长平均划分。更改步长大小可以解决此问题。
向novalidate
表单添加属性将有助于:
<form name="myform" novalidate>
<fieldset>
在您的中form
,您可能隐藏了input
具有required
属性:
<input type="hidden" required />
<input type="file" required style="display: none;"/>
在form
不能专注于这些元素,你必须删除required
所有隐藏的投入,或实现验证功能的JavaScript来处理他们,如果你真的需要一个隐藏的输入。
required
。pattern
一个人就能造成这个问题。
<input type="hidden" required />
,另一种具有<input type="text" style="display: none" required />
,并且在Chrome中唯一显示错误的是display: none
,而"hidden"
一种可以很好地提交。
万一其他人遇到这个问题,我也会遇到同样的事情。如评论中所讨论的,这是由于浏览器试图验证隐藏字段而引起的。它正在查找表单中的空字段并尝试将其重点关注,但是因为它们被设置为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.
});
此外,这可能仅在Google Chrome中是“无效的表单控件”的重复项
在我的情况下,问题input type="radio" required
在于隐藏于:
visibility: hidden;
如果要求的输入类型radio
或checkbox
具有display: none;
CSS属性,还将显示此错误消息。
如果要创建自定义单选框/复选框输入,必须在其中将它们从UI中隐藏并仍保留该required
属性,则应改用:
opacity: 0;
CSS属性
name=""
而不是原始输入?
以前的答案都对我没有用,并且我没有任何隐藏字段 required
属性的。
在我的情况下,问题是由先有a <form>
然后有a <fieldset>
作为第一个孩子而引起的,该孩子拥有<input>
with required
属性。删除已<fieldset>
解决的问题。或者您可以用它包装表格;HTML5允许使用。
我使用Windows 7 x64,Chrome版本43.0.2357.130 m。
对我来说,发生这种情况是,当有一个<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上。
如果您有任何具有必填属性的字段,而这些属性在表单提交过程中不可见,则会引发此错误。尝试隐藏该字段时,只需删除必需的属性。如果要再次显示该字段,可以添加必需的属性。这样,您的验证将不会受到影响,同时不会引发错误。
$("input").attr("required", "true");
或者$("input").prop('required',true);
相反,您可以remove
使用attribute / property。>> jQuery将必需的字段添加到输入字段中
对于Select2 Jquery问题
问题是由于HTML5验证无法集中隐藏的无效元素。我在处理jQuery Select2插件时遇到了这个问题。
解决方案 您可以在表单的每个元素上插入一个事件侦听器,并将其“无效”事件注入,以便可以在HTML5 validate事件之前进行操作。
$('form select').each(function(i){
this.addEventListener('invalid', function(e){
var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
var _posS2 = $('#'+_s2Id).position();
//get the current position of respective select2
$('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
//this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
$('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
/*
//Adjust the left and top position accordingly
*/
//remove invalid class after 3 seconds
setTimeout(function(){
$('#'+_s2Id+' ul').removeClass('_invalid');
},3000);
return true;
}, false);
});
是的。如果隐藏的表单控件具有必填字段,则显示此错误。一种解决方案是禁用此表单控件。这是因为通常如果您隐藏表单控件,那是因为您不关心其值。因此,在提交表单时不会发送此表单控件名称值对。
当您具有包含必填字段的普通表单并提交表单,然后在提交后立即将其隐藏(使用javascript),没有任何时间使验证功能起作用,这是另一个可能的原因,并且在以前的所有答案中都未涉及。
验证功能将尝试着重于必填字段,并显示错误验证消息,但该字段已被隐藏,因此“带有name =”的无效表单控件不可聚焦。出现!
编辑:
要处理这种情况,只需在您的提交处理程序中添加以下条件
submitHandler() {
const form = document.body.querySelector('#formId');
// Fix issue with html5 validation
if (form.checkValidity && !form.checkValidity()) {
return;
}
// Submit and hide form safely
}
编辑:解释
假设您在提交时隐藏了表单,此代码保证在表单生效之前不会隐藏表单/字段。因此,如果某个字段无效,则浏览器可以毫无问题地专注于该字段,因为该字段仍会显示。
有些事情仍然让我感到惊讶...我有一个具有两个不同实体动态行为的表单。一个实体需要一些其他实体不需要的字段。因此,根据实体,我的JS代码会执行以下操作:$('#periodo')。removeAttr('required'); $(“#periodo-container”)。hide();
当用户选择另一个实体时:$(“#periodo-container”)。show(); $('#periodo')。prop('required',true);
但是有时,在提交表单时,问题会出现:“具有name = periodo的无效表单控件”无法聚焦(我在id和name中使用了相同的值)。
要解决此问题,必须确保设置或删除“ required”的输入始终可见。
因此,我所做的是:
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required');
$("#periodo-container").hide(); //then hide
多数民众赞成在解决我的问题...令人难以置信。
对于角度使用:
ng-required =“ boolean”
如果该值为true,则只会应用html5'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
我来这里是为了回答我是由于未关闭 </form>
标签并且同一页面上有多个表单。第一种形式将扩展为包括寻求对来自其他地方的形式输入的验证。因为THOSE表单是隐藏的,所以它们触发了错误。
因此例如:
<form method="POST" name='register' action="#handler">
<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />
<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />
</form>
扳机
名称='userId'的无效表单控件不可聚焦。
名称='password'的无效表单控件不可聚焦。
名称='confirm'的无效表单控件不可聚焦。
有很多方法可以解决这个问题,例如
<form action="...." class="payment-details" method="post" novalidate>
使用可以从必填字段中删除必填属性,这也是错误的,因为它将再次删除表单验证。
代替这个:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">
Use this:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">
当您不打算提交表单而不进行其他选择时,使用可以禁用必填字段。我认为这是推荐的解决方案。
喜欢:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">
还是通过javascript / jquery代码禁用它取决于您的情况。
使用Angular JS时我发现了同样的问题。这是从使用造成需要加上NG-隐藏。当我在隐藏该元素的情况下单击“提交”按钮时,便发生了错误,名称为“''的无效表单控件无法聚焦。最后!
例如,与ng-hide一起使用时:
<input type="text" ng-hide="for some condition" required something >
我通过用ng-pattern代替了必需的来解决了它。
例如解决方案:
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
我来这里时遇到了同样的问题。对我来说(根据需要注入隐藏元素-即在工作应用中接受教育)具有必需的标志。
我意识到验证器对注入文件的触发速度比文件准备就绪的速度快,因此抱怨。
我最初的ng-required标签是使用可见性标签(vm.flags.hasHighSchool)。
我通过创建专用标志来解决,以设置所需的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>
这是因为表单中存在带有必填属性的隐藏输入。
就我而言,我有一个选择框,它被jQuery标记器使用内联样式隐藏。如果我没有选择任何令牌,浏览器将在表单提交时引发上述错误。
因此,我使用以下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;
}