Google reCAPTCHA v2隐形版表单验证问题：required属性失效

问题核心在于隐形reCAPTCHA的按钮劫持了原生表单提交流程，导致浏览器自带的required验证逻辑被跳过。直接调用form.checkValidity()确实无法唤起浏览器默认的验证提示，得换个思路——让原生表单验证先执行，通过后再触发reCAPTCHA验证。

修改方案如下：

1. 将带g-recaptcha类的按钮改为普通提交按钮，移除reCAPTCHA相关属性
2. 监听表单的submit事件，先触发原生验证，验证通过后再手动调用reCAPTCHA验证
3. 调整回调逻辑，确保reCAPTCHA验证通过后再提交表单

完整代码示例：

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
    // 监听表单提交事件
    document.getElementById("contact-form").addEventListener("submit", function(e) {
        // 先阻止默认提交行为
        e.preventDefault();
        
        // 触发浏览器原生验证，自动弹出required的提示
        if (!this.checkValidity()) {
            // 手动触发浏览器的验证反馈（兼容部分浏览器）
            this.reportValidity();
            return;
        }
        
        // 原生验证通过后，调用隐形reCAPTCHA验证
        grecaptcha.execute('xxx', {action: 'submit'}).then(function(token) {
            // 把reCAPTCHA验证token加入表单（供后端验证使用）
            var tokenInput = document.createElement('input');
            tokenInput.type = 'hidden';
            tokenInput.name = 'g-recaptcha-response';
            tokenInput.value = token;
            document.getElementById("contact-form").appendChild(tokenInput);
            
            // 提交表单
            document.getElementById("contact-form").submit();
        });
    });
</script>

<form id="contact-form" method="post" action="/send">
    <input name="message" required placeholder="请输入内容" />
    <button type="submit">Send</button>
</form>

关键说明： #

• checkValidity()检查表单规则但不弹出提示，reportValidity()会触发浏览器自带的验证提示框，二者配合即可唤起原生反馈
• 手动调用grecaptcha.execute()触发reCAPTCHA验证，避免按钮劫持原生提交流程
• 新增隐藏字段存储reCAPTCHA的验证token，满足后端验证的常规需求

这样既保留了浏览器原生的required提示效果，又能正常使用隐形reCAPTCHA的验证功能。

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