这发生在我身上，因为我正在使用Materialize JS/CSS框架。当我在物化表单中创建<select>字段时，它被转换为具有许多风格化字段的托管字段，而真正的<select>字段被框架隐藏，仅用于向post请求传递所选值。

因此，它将始终显示控制台错误，除非我使用浏览器默认类使<select>字段的Materialize管理无效。

另一种方法是使用一个带有type="button"而不是type="submit"的按钮，并使用$('form').submit()来发送表单，但您将失去浏览器验证UI，必须开发自己的UI，或者使用框架的UI。

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

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

简而言之，div id有

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

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

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

这个问题发生在Chrome上，如果一个表单字段验证失败，但由于各自的无效控件无法聚焦，浏览器试图显示消息“请填写此字段”旁边也失败了。

由于多种原因，表单控件在触发验证时可能无法聚焦。下面描述的两种情况是最突出的原因:

The field is irrelevant according to the current context of the business logic. In such a scenario, the respective control should be disabled or removed from the DOM or not be marked with the required attribute at that point. Premature validation may occur due to a user pressing ENTER key on an input. Or a user clicking on a button/input control in the form which has not defined the type attribute of the control correctly. If the type attribute of a button is not set to button, Chrome (or any other browser for that matter) performs a validation each time the button is clicked because submit is the default value of a button's type attribute.

为了解决这个问题，如果你的页面上有一个按钮是做其他事情而不是提交或重置，请记住这样做:<button type="button">。

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

哇，这里有这么多答案!

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

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

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

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