HTML5 表单验证看不到消息弹出 Mac Safari
Posted
技术标签:
【中文标题】HTML5 表单验证看不到消息弹出 Mac Safari【英文标题】：HTML5 form validation out of view not getting message popup 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>
【问题讨论】：
【参考方案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
【讨论】：
以上是关于HTML5 表单验证看不到消息弹出 Mac Safari的主要内容，如果未能解决你的问题，请参考以下文章