以防其他人有这个问题，我也经历过同样的事情。正如评论中所讨论的，这是由于浏览器试图验证隐藏字段。它在表单中寻找空字段并试图集中在它们上，但是因为它们被设置为display:none;，所以它不能。因此出现了错误。

我可以用类似的方法来解决这个问题:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

此外，这可能是重复的“无效的窗体控件”只有在谷歌Chrome

哇，这里有这么多答案!

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

在表单中添加novalidate属性将有助于:

<form name="myform" novalidate>

对于其他AngularJS 1。x个用户在那里，这个错误出现是因为我隐藏了一个窗体控件显示，而不是完全从DOM中删除它时，我不需要控件完成。

我通过在包含需要验证的表单控件的div上使用ng-if而不是ng-show/ng-hide来修复这个问题。

希望这能帮助到你的边缘情况用户。

当你向输入字段提供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');

或者另一个万无一失的答案是使用HTML5占位符属性，那么就不需要使用任何js验证。

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome将无法找到任何空的，隐藏的和需要关注的元素。简单的解决方案。

希望这能有所帮助。我完全接受这个解决方案。