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

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

这来自JavaScript控制台。

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

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


当前回答

您可以尝试. removeattribute ("required")用于那些在窗口加载时隐藏的元素。因为很有可能由于javascript(选项卡表单),所讨论的元素被标记为隐藏

e.g.

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

这应该可以完成任务。

这对我很管用……干杯

其他回答

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

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

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

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

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

.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();
   }
}); 

在您的表单输入中。你把需要的保存在隐藏输入中,这就是为什么它抛出:

An invalid form control with name='' is not focusable

检查抛出无效的输入名称,您将其隐藏并保留为必需的。

只需从隐藏的输入名称中删除所需的。完成了。

当你向输入字段提供style="display: none;"和required属性时,这个问题就会发生,并且在提交时会进行验证。 例如:

<input type="text" name="name" id="name" style="display: none;" required>

这个问题可以通过从HTML的输入字段中删除所需的属性来解决。如果需要添加所需属性,请动态添加。如果你正在使用JQuery,请使用下面的代码:

$("input").prop('required',true);

如果需要动态删除该字段,

$("input").prop('required',false);

如果你不使用JQuery,你也可以使用纯Javascript:

document.getElementById('element_id').removeAttribute('required');

对于Angular来说:

ng-required =“布尔”

如果值为true,这将只应用html5 'required'属性。

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />