如果在表单提交期间字段不在屏幕上，则验证消息不会显示在无效字段上

Question

我想在注册表单中使用HTML5约束验证。我有大量的输入，因此，提交按钮不会与某些必填字段同时显示在屏幕上。我发现在MS Edge中，如果您尝试在屏幕上没有无效输入时提交表单，它将滚动并聚焦无效输入，但不显示验证消息（错误）气泡。除了显示验证方法之外，它将执行除此之外的所有其他操作。我创建了一个Codepen来演示这个：

http://codepen.io/TheHanna/pen/pRZPae

HTML

<form id="registrationForm">
  <input type="text" name="first" id="first" required>
  <input type="submit">
</form>

CSS

#first {
  display: block;
  margin-bottom: 100vh;
}

预期行为： 点击提交按钮;文本输入滚动到视图中，带有红色轮廓，文本气泡说“这是必填字段”。如果您在无效的情况下输入该字段，则气泡将消失。

实际行为： 点击提交按钮;文本输入滚动到视图， 红色轮廓。如果在视口中无效和时将输入对焦，则会显示消息气泡。如果您在无效的情况下输入该字段，则气泡将消失。

我在提交之前正在做一些自定义验证，所以我不想只是以不同的方式设置它，我想指出为什么输入在某种程度上是无效的。我想避免在页面中添加更多HTML以显示错误消息或使用其他库;功能就在那里。我还没有编写解决方案，但我的思路如下：

1. 捕获无效事件
2. 检查无效输入是否在视口中
3. 如果是，请继续执行事件，否则，将其滚动到视图中，确认它在视口中，然后继续执行事件

有没有人遇到过这个问题？这是Edge的预期行为，还是已知的bug？或者它是未知的，如果是，我应该在哪里报告？