我的网站上有一个严重的问题。在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必需的属性。
出现此错误的似乎是随机的。有谁知道解决方案吗?
我想在这里回答,因为这些回答或任何其他Google结果都没有为我解决问题。
对我而言,它与字段集或隐藏的输入无关。
我发现如果使用max="5"
(例如)它将产生此错误。如果我用过maxlength="5"
...没有错误。
我能够重现错误并清除错误多次。
我仍然不知道为什么使用该代码会产生错误,就此而言,即使我认为没有“最小”值,它也应该是有效的。
确保表单中所有具有必需属性的控件也都设置了name属性
或者,另一个简单的答案是使用HTML5占位符属性,那么就无需使用任何js验证。
<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">
Chrome将无法找到任何空白,隐藏和必需的元素来关注。简单的解决方案。
希望能有所帮助。我对这种解决方案完全满意。
让我说一下我的情况,因为它与上述所有解决方案都不相同。我有一个HTML标记未正确关闭。该元素不是 required
,但它嵌入在hidden
div中
在我的情况下,问题出在type="datetime-local"
,出于某种原因在提交表单时对其进行了验证。
我改变了这个
<input type="datetime-local" />
进入那个
<input type="text" />
我来这里时遇到了同样的问题。对我来说(根据需要注入隐藏元素-即在工作应用中接受教育)具有必需的标志。
我意识到验证器对注入文件的触发速度比文件准备就绪的速度快,因此它抱怨。
我最初的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>
使用Angular JS时我发现了同样的问题。这是从使用造成需要加上NG-隐藏。当我在隐藏该元素的情况下单击“提交”按钮时,发生了错误,名称为“ =”的无效表单控件无法聚焦。最后!
例如,结合使用ng-hide和required:
<input type="text" ng-hide="for some condition" required something >
我通过用ng-pattern代替了必需的来解决了它。
例如解决方案:
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
有很多方法可以解决这个问题,例如
<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代码禁用它取决于您的情况。
就我而言
ng-show
被使用。
ng-if
被放在它的位置并修复了我的错误。
如果您具有以下代码,它将显示该消息:
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
如果您有任何具有必填属性的字段,而这些属性在表单提交期间不可见,则会引发此错误。当您尝试隐藏该字段时,只需删除必需的属性。如果要再次显示该字段,可以添加必需的属性。这样,您的验证将不会受到影响,同时不会引发错误。
是的..如果隐藏的表单控件具有必填字段,那么它将显示此错误。一种解决方案是禁用此表单控件。这是因为通常如果您隐藏表单控件,那是因为您不关心其值。因此,在提交表单时不会发送该表单控件名称值对。
可能是您隐藏了(显示:无)具有必填属性的字段。
请检查所有必填字段对用户可见:)
对我来说,这种情况发生在一个<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上。
先前的答案对我都没有作用,并且我没有任何具有该required
属性的隐藏字段。
在我的情况下,问题是由先有a <form>
然后有a <fieldset>
作为第一个子项(其<input>
带有required
属性)引起的。删除已<fieldset>
解决的问题。或者,您可以用它包装表格;HTML5允许使用。
我使用的是Windows 7 x64,Chrome版本43.0.2357.130 m。
在您的中form
,您可能隐藏了input
具有required
属性:
<input type="hidden" required />
<input type="file" required style="display: none;"/>
在form
不能专注于这些元素,你必须删除required
所有隐藏的投入,或实现验证功能的JavaScript来处理他们,如果你真的需要一个隐藏的输入。
如果您在复选框输入中遇到错误,则还有另一种可能性。如果您的复选框使用自定义CSS,该自定义CSS隐藏了默认设置,并用其他样式替换了默认设置,则这还会在Chrome出现验证错误时触发不可聚焦的错误。
我在样式表中找到了这个:
input[type="checkbox"] {
visibility: hidden;
}
简单的解决方法是将其替换为:
input[type="checkbox"] {
opacity: 0;
}
在我的情况下,问题input type="radio" required
在于隐藏于:
visibility: hidden;
如果要求的输入类型radio
或checkbox
具有display: none;
CSS属性,还将显示此错误消息。
如果要创建自定义单选框/复选框输入,必须在其中将其从UI中隐藏并仍保留该required
属性,则应改用:
opacity: 0;
CSS属性
向novalidate
表单添加属性将有助于:
<form name="myform" novalidate>
如果表单字段验证失败,则在Chrome上会发生此问题,但是由于相应的无效控件无法聚焦,浏览器尝试在其旁边显示消息“请填写此字段”的尝试也失败了。
由于多种原因,在触发验证时,表单控件可能无法聚焦。下列两种情况是最主要的原因:
根据业务逻辑的当前上下文,该字段无关紧要。在这种情况下,应该从DOM中删除相应的控件,或者此时不应该用required
属性标记该控件。
由于用户按输入上的ENTER键,可能会发生过早验证。或者用户单击按钮/输入控件的形式尚未type
正确定义控件的属性。如果按钮的type属性未设置为button
,则Chrome(或与此相关的任何其他浏览器)每次单击按钮都会执行一次验证,因为这submit
是按钮type
属性的默认值。
要解决该问题,如果页面上有一个按钮除了执行提交或重置操作外还执行其他操作,请始终记住执行以下操作:<button type="button">
。
我发生此错误是因为我提交的表单中未填写必填字段。
产生该错误的原因是,浏览器试图将焦点放在必填字段上,以警告用户必填字段,但这些必填字段隐藏在display div中,因此浏览器无法专注于它们。我是从可见选项卡提交的,必填字段位于隐藏的选项卡中,因此出现错误。
要解决此问题,请确保您控制了必填字段。