移动端Firefox表单未填必填项无提示问题求助

问题背景 #

提交未填写必填项的表单时，Windows端Firefox、Android端Chrome会正常弹出验证提示并高亮字段，但Android端Firefox无任何反馈，极简测试表单、隐身模式下均复现该问题。

解决方案 #

1. 手动调用HTML5验证API强制触发提示 #

通过监听表单提交事件，手动调用checkValidity()和reportValidity()方法，强制浏览器显示原生验证提示，覆盖Android Firefox的兼容性问题。

修改后的表单代码：

<!DOCTYPE html>
<html>
<head>
    <title>Kontaktformulär</title>
</head>
<body>
    <h2>Kontakta oss</h2>
    <form id="contactForm" action="https://formspree.io/f/<my_key>" method="post">
        <label for="name">Namn:</label>
        <input type="text" id="name" name="name" required placeholder=""><br>

        <label for="email">E-post:</label>
        <input type="email" id="email" name="email" required placeholder=""><br>

        <label for="message">Meddelande:</label>
        <textarea id="message" name="message" rows="4" required placeholder=""></textarea><br>

        <input type="submit" value="Skicka">
    </form>

    <script>
        const contactForm = document.getElementById('contactForm');
        contactForm.addEventListener('submit', function(e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                this.reportValidity();
            }
        });
    </script>
</body>
</html>

2. 自定义验证状态样式增强一致性 #

移动端浏览器对原生验证样式支持差异较大，通过CSS伪类自定义必填字段的状态，让用户直观识别未填项：

/* 必填字段基础样式 */
input:required, textarea:required {
    border: 1px solid #e0e0e0;
}

/* 未填写且失去焦点时的错误样式 */
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) {
    border-color: #ff4444;
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}

/* 聚焦时的错误样式 */
input:invalid:focus, textarea:invalid:focus {
    border-color: #ff4444;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.4);
}

3. 排查浏览器设置与版本 #

• 确认Android Firefox未禁用弹出窗口：进入设置 → 隐私与安全，取消勾选"阻止弹出窗口"（原生验证提示可能被误拦截）
• 更新Android Firefox至最新版本，旧版本可能存在HTML5验证API的兼容bug

内容的提问来源于stack exchange，提问作者Johan