在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
这是因为表单中有一个带有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;
}
其他回答
我希望在这个冗长的答案种子中没有遗漏我的场景是一些非常奇怪的事情。
我有div元素,动态更新通过对话框被调用在他们加载和得到行动。
简而言之,div id有
<div id="name${instance.username}"/>
我有一个用户:测试帐户,出于某种原因,编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。
缩小到这个范围,重新测试使用数字代替,即id似乎解决了这个问题。
这是因为表单中有一个带有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;
}
如果您有任何具有required属性的字段,但在表单提交期间不可见,则将抛出此错误。当您试图隐藏该字段时,只需删除所需的属性。如果您想再次显示该字段,您可以添加所需的属性。通过这种方式,您的验证将不会受到影响,同时,错误将不会抛出。
不仅仅是在其他答案中提到的必填项。这也是由于将<input>字段放置在隐藏的<div>中导致的,该字段持有无效值。
考虑下面的例子,
<div style="display:none;">
<input type="number" name="some" min="1" max="50" value="0">
</div>
这将抛出相同的错误。所以确保<input>字段隐藏<div>不持有任何无效值。
使用ElementInternals API的自定义元素元素不能使用delegatesFocus: true与shadowRoot,因为元素必须直接接收焦点(目前,这可能会发展)在公开的表单的DOM树(父表单可以在shadowRoot,它只是必须在同一部分的树与自定义和其他表单元素);元素必须是可见的,在我的实验中tabindex=0是必需的元素(-1似乎也工作)
一个从googlchrome扩展的带有自定义元素的演示在https://jimmont.github.io/samples/report-validity/
the error is simply reporting that an element which has attributes indicating it needs validation cannot receive focus when there's a problem with the validation, so the user can correct the error; if the error and information is coming in as expected you can ignore the error; otherwise it's likely the result of some UI features hiding elements and a mix of unexpected behavior; it's possible to use another approach in implementations to allow the user to walk back through a flow of some sort, but it appears that's beyond the scope of the question at the moment