在谷歌Chrome一些客户无法继续到我的支付页面。 当我试图提交一个表单时,我得到这个错误:

name= "无效的窗体控件不可聚焦。

这来自JavaScript控制台。

我读到这个问题可能是由于隐藏字段具有必需的属性。 现在的问题是,我们使用的是。net webforms required字段验证器,而不是html5 required属性。

谁得到这个错误似乎是随机的。 有谁知道解决办法吗?


当前回答

如果您在复选框输入上得到错误,则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认并替换为一些其他样式,这也将触发不可聚焦错误在Chrome验证错误。

我发现这在我的样式表:

input[type="checkbox"] {
    visibility: hidden;
}

简单的解决方法是用这个替换它:

input[type="checkbox"] {
    opacity: 0;
}

其他回答

我也是带着同样的问题来的。对我来说(在需要的时候注入隐藏元素——比如在工作应用程序中接受教育)有必要的标志。

我意识到,验证器对注入文件的启动速度比文档准备好还要快,因此它会报错。

我最初的ng-required标记使用可见性标记(vm.flags.hasHighSchool)。

我通过创建一个专用标志来设置required来解决这个问题 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>

我经常看到有人问这个问题,我自己也遇到过这个“错误”。甚至有链接质疑这是否是Chrome的一个真正的错误。 这是当一个或多个表单输入类型元素被隐藏并且这些元素具有最小/最大限制(或其他一些验证限制)时发生的响应。

在创建表单时,元素没有赋值,之后元素值可能会被填充或保持不变。 在提交时,表单将被解析,任何超出这些验证限制的隐藏元素将向控制台抛出这个“错误”,提交将失败。因为您不能访问这些元素(因为它们是隐藏的),所以这是唯一有效的响应。

这不是一个实际的错误或错误。这表示有一些即将提交的元素值超出了一个或多个元素规定的限制。

为了解决这个问题,在表单提交之前的任何时候,为隐藏在表单中的任何元素分配一个有效的默认值,那么这些“错误”将永远不会发生。它本身并不是一个bug,它只是迫使您养成更好的编程习惯。

注意:如果您希望将这些值设置为验证限制之外的值,请使用form。addEventListener('submit', myFunction)来拦截'submit'事件,并在"myFunction"中填充这些元素。似乎验证检查是在“myFunction()”被调用之前执行的。

哇,这里有这么多答案!

如果问题是<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;
}

不仅仅是当指定需要时,我也得到了这个问题时,使用最小值和最大值。

<input type="number" min="1900" max="2090" />

该字段可以根据其他无线电值隐藏和显示。因此,作为临时解决方案,我删除了验证。

我来说明一下我的情况,因为它不同于上面所有的解。我有一个html标签没有正确关闭。元素不是必需的,但它嵌入在一个隐藏的div中

在我的案例中,问题在于type="datetime-local",出于某种原因,它在表单提交时被验证。

我改变了这个

<input type="datetime-local" />

<input type="text" />