HTML5表单验证看不到消息弹出窗口Mac Safari

HTML5 表单验证在 Mac Safari 中可能不会显示消息弹出窗口的原因及解决方法如下：

基础概念

HTML5 表单验证是通过在表单元素上添加特定的属性（如 required、pattern 等）来实现客户端验证。浏览器会根据这些属性自动进行验证，并在用户提交无效表单时显示错误消息。

可能的原因

浏览器设置问题：Safari 的隐私设置可能阻止了某些弹出窗口。
JavaScript 干扰：页面上的 JavaScript 代码可能干扰了默认的表单验证行为。
CSS 影响：CSS 样式可能隐藏了错误消息。

解决方法

1. 检查浏览器设置

确保 Safari 的隐私设置没有阻止弹出窗口。可以尝试以下步骤：

打开 Safari 浏览器。
进入 Safari > 偏好设置 > 隐私。
确保没有启用“阻止所有弹出窗口”的选项。

2. 使用 JavaScript 进行调试

如果怀疑是 JavaScript 干扰了表单验证，可以添加一些调试代码来检查是否有错误发生：

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
            event.preventDefault();
            console.log('Form is invalid');
            // 手动显示错误消息
            const invalidElements = form.querySelectorAll(':invalid');
            invalidElements.forEach(element => {
                element.reportValidity();
            });
        }
    });
});

3. 检查 CSS 样式

确保没有 CSS 样式隐藏了错误消息。可以添加以下样式来确保错误消息可见：

input:invalid + span::before {
    content: attr(data-error);
    color: red;
    display: block;
}

并在 HTML 中使用：

<input type="text" required data-error="This field is required">
<span></span>

4. 使用 Polyfill

如果上述方法都不奏效，可以考虑使用 polyfill 来增强表单验证功能。例如，使用 webshim 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.17.10/polyfiller.min.js"></script>
<script>
    webshims.setOptions('forms-ext', { types: 'date' });
    webshims.polyfill('forms forms-ext');
</script>