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

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();
            });
        }
    });
});

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

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

<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>