你可以禁用HTML5验证，如果你不想要它在其他回复中提到。 但如果你仍然需要HTML5验证，你可以向提交按钮添加一个“click”事件监听器来显示隐藏字段。click事件将使字段可见，验证不再抛出错误。

我在使用Angular JS时也发现了同样的问题。这是由于与ng-hide一起使用required引起的。当我点击提交按钮，而这个元素是隐藏的，然后发生错误，无效的窗体控件与名称= "是不可聚焦的。终于!

例如，将ng-hide和required一起使用:

<input type="text" ng-hide="for some condition" required something >

我通过用ng-pattern代替所需的来解决它。

例如解决方案:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

如果你有这样的代码，它会显示这条消息:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

确保表单中具有所需属性的所有控件也具有name属性集

这是因为表单中有一个带有required属性的隐藏输入。

在我的情况下，我有一个选择框，它是隐藏的jquery tokenizer使用内联风格。如果我没有选择任何令牌，浏览器在表单提交时抛出上述错误。

所以，我用下面的css技术修复了它:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

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

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

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