另一个可能的原因，并没有涵盖在所有前面的答案，当你有一个正常的表单与必填字段，你提交了表单，然后隐藏它直接提交(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
  }

编辑:解释

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

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

e.g.

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

这应该可以完成任务。

这对我很管用……干杯

我经常看到有人问这个问题，我自己也遇到过这个“错误”。甚至有链接质疑这是否是Chrome的一个真正的错误。 这是当一个或多个表单输入类型元素被隐藏并且这些元素具有最小/最大限制(或其他一些验证限制)时发生的响应。

在创建表单时，元素没有赋值，之后元素值可能会被填充或保持不变。 在提交时，表单将被解析，任何超出这些验证限制的隐藏元素将向控制台抛出这个“错误”，提交将失败。因为您不能访问这些元素(因为它们是隐藏的)，所以这是唯一有效的响应。

这不是一个实际的错误或错误。这表示有一些即将提交的元素值超出了一个或多个元素规定的限制。

为了解决这个问题，在表单提交之前的任何时候，为隐藏在表单中的任何元素分配一个有效的默认值，那么这些“错误”将永远不会发生。它本身并不是一个bug，它只是迫使您养成更好的编程习惯。

注意:如果您希望将这些值设置为验证限制之外的值，请使用form。addEventListener('submit'， myFunction)来拦截'submit'事件，并在"myFunction"中填充这些元素。似乎验证检查是在“myFunction()”被调用之前执行的。

哇，这里有这么多答案!

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

它可以是你有隐藏(display: none)字段和必需的属性。

请检查所有必填字段是否对用户可见:)

我想在这里回答，因为没有这些答案，或任何其他谷歌结果解决了我的问题。

对我来说，它与字段集或隐藏输入无关。

我发现，如果我使用max="5"(例如)，它会产生这个错误。如果我使用maxlength="5"…没有错误。

我能够重现错误和清除错误几次。

我仍然不知道为什么使用该代码会产生错误，就这一点而言，它应该是有效的，即使没有“最小值”，我相信。