另一个可能的原因，并没有涵盖在所有前面的答案，当你有一个正常的表单与必填字段，你提交了表单，然后隐藏它直接提交(javascript)没有时间验证功能的工作。

验证功能将尝试集中在必需的字段上并显示错误验证消息，但该字段已被隐藏，因此出现“name= " is not focusable."的无效表单控件!

编辑:

要处理这种情况，只需在提交处理程序中添加以下条件

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

编辑:解释

假设在提交表单时隐藏表单，这段代码保证表单/字段在表单生效之前不会被隐藏。因此，如果一个字段无效，浏览器可以将焦点集中在它上，因为该字段仍然显示。

你可以禁用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" >

我希望在这个冗长的答案种子中没有遗漏我的场景是一些非常奇怪的事情。

我有div元素，动态更新通过对话框被调用在他们加载和得到行动。

简而言之，div id有

<div id="name${instance.username}"/>

我有一个用户:测试帐户，出于某种原因，编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。

缩小到这个范围，重新测试使用数字代替，即id似乎解决了这个问题。

如果您有任何具有required属性的字段，但在表单提交期间不可见，则将抛出此错误。当您试图隐藏该字段时，只需删除所需的属性。如果您想再次显示该字段，您可以添加所需的属性。通过这种方式，您的验证将不会受到影响，同时，错误将不会抛出。

对于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);          
});