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

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

这来自JavaScript控制台。

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

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


当前回答

对我来说,这发生了,当有一个<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出现此问题。

其他回答

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

我发现这在我的样式表:

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

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

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

这个错误发生在我身上,因为我提交了一个没有填写必填字段的表单。

产生此错误是因为浏览器试图集中在必填字段上,以警告用户这些字段是必填字段,但这些必填字段隐藏在一个display none div中,因此浏览器无法集中在它们上。我从一个可见的选项卡提交,所需的字段是在一个隐藏的选项卡,因此出现错误。

要解决这个问题,请确保您控制的必填字段已填满。

或者另一个万无一失的答案是使用HTML5占位符属性,那么就不需要使用任何js验证。

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome将无法找到任何空的,隐藏的和需要关注的元素。简单的解决方案。

希望这能有所帮助。我完全接受这个解决方案。

奇怪的是,每个人都建议删除验证,而验证的存在是有原因的…… 不管怎样,如果你在使用一个自定义控件,并且想要维护验证,你可以这样做:

第一步。从输入中删除无显示,因此输入变得可聚焦

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

第二步骤。如果样式不够,则在特定情况下的输入上添加无效事件处理程序

inputEl.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
}); 

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

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

我最初的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>