1

我想将 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 的预期行为，还是已知的错误？还是未知，如果是，我应该在哪里报告？

4

0 回答 0