如果您有任何具有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>

对于Select2 Jquery问题

这个问题是由于HTML5验证不能聚焦隐藏的无效元素。 我在处理jQuery Select2插件时遇到了这个问题。

解决方案 你可以在表单的每个元素上注入事件监听器和“无效”事件，这样你就可以在HTML5验证事件之前进行操作。

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

哇，这里有这么多答案!

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

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

我发现这在我的样式表:

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

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

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

对于Angular来说:

ng-required =“布尔”

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

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