HTML5 表单验证看不到消息弹出 Mac Safari答案

【问题标题】：HTML5 form validation out of view not getting message popup Mac SafariHTML5 表单验证看不到消息弹出 Mac Safari
【发布时间】：2019-06-25 12:28:17
【问题描述】：

我有一个简单的表单，其中只有一长串文本字段。每个字段都标记为必填项。像这样：

在浏览器中，如果我将无效的空字段滚动到视图之外，然后提交表单。表单将滚动到无效字段，突出显示字段的边框，但不显示应包含验证文本“请填写此字段”的消息弹出窗口。

但是，如果在我提交表单时，空白字段在视图中 - 那么 Safari 会按预期显示消息气泡和文本。

我在 Mac 上使用 Safari 浏览器（版本 12.0.2）。

这是一个非常简单的表单示例。

https://jsfiddle.net/7ho0udrw/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
</head>
<body>
    <form action="">
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input type="submit">
    </form>
</body></html>

【问题讨论】：

标签： html validation safari field

【解决方案1】：

显然，应该发生的是消息气泡弹出，然后在您滚动窗口时消失。因此 Safari 会弹出气泡，然后滚动窗口以显示问题字段，然后关闭气泡。哎呀。

这是一个可能的解决方法：添加第二个提交按钮

<form>
  <input required name="foo">
  <button class="submit">submit</button>
  <button class="safari"></button>
</form>

通过css隐藏

.safari { display: none; }

并在用户点击可见按钮后使用javascript触发点击隐藏按钮。

$('.button').click(function(){
  setTimeout(function(){
    $('.safari').click()
  }, 1);
});

fiddle

【讨论】：