在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:
name= "无效的窗体控件不可聚焦。
这来自JavaScript控制台。
我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。
谁得到这个错误似乎是随机的。 有谁知道解决办法吗?
当前回答
对于Angular来说:
ng-required =“布尔”
如果值为true,这将只应用html5 'required'属性。
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
其他回答
哇,这里有这么多答案!
如果问题是<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;
}
我来说明一下我的情况,因为它不同于上面所有的解。我有一个html标签没有正确关闭。元素不是必需的,但它嵌入在一个隐藏的div中
在我的案例中,问题在于type="datetime-local",出于某种原因,它在表单提交时被验证。
我改变了这个
<input type="datetime-local" />
到
<input type="text" />
不仅仅是在其他答案中提到的必填项。这也是由于将<input>字段放置在隐藏的<div>中导致的,该字段持有无效值。
考虑下面的例子,
<div style="display:none;">
<input type="number" name="some" min="1" max="50" value="0">
</div>
这将抛出相同的错误。所以确保<input>字段隐藏<div>不持有任何无效值。
在您的表单输入中。你把需要的保存在隐藏输入中,这就是为什么它抛出:
An invalid form control with name='' is not focusable
检查抛出无效的输入名称,您将其隐藏并保留为必需的。
只需从隐藏的输入名称中删除所需的。完成了。
我经常看到有人问这个问题,我自己也遇到过这个“错误”。甚至有链接质疑这是否是Chrome的一个真正的错误。 这是当一个或多个表单输入类型元素被隐藏并且这些元素具有最小/最大限制(或其他一些验证限制)时发生的响应。
在创建表单时,元素没有赋值,之后元素值可能会被填充或保持不变。 在提交时,表单将被解析,任何超出这些验证限制的隐藏元素将向控制台抛出这个“错误”,提交将失败。因为您不能访问这些元素(因为它们是隐藏的),所以这是唯一有效的响应。
这不是一个实际的错误或错误。这表示有一些即将提交的元素值超出了一个或多个元素规定的限制。
为了解决这个问题,在表单提交之前的任何时候,为隐藏在表单中的任何元素分配一个有效的默认值,那么这些“错误”将永远不会发生。它本身并不是一个bug,它只是迫使您养成更好的编程习惯。
注意:如果您希望将这些值设置为验证限制之外的值,请使用form。addEventListener('submit', myFunction)来拦截'submit'事件,并在"myFunction"中填充这些元素。似乎验证检查是在“myFunction()”被调用之前执行的。