html 5 验证不适用于谷歌隐形 recaptcha

Question

我之前有一个基本的 Html 5 表单工作正常，但在我向其中添加了 google 隐形验证码之后。Html5 验证停止工作。我在谷歌上冲浪了很多但找不到方法

<script>
function onSubmit(token) {
document.getElementById("send").submit();
}
</script>

<form  id="send" action="process.php" method="post">
<input type="text" required name="Send" minlength="6" maxlength="16" placeholder="stackoverflow">
<button class="btn btn-primary g-recaptcha" data-sitekey="hidden" data-callback='onSubmit'>Submit</button>
</form>

即使输入语句未得到满足，它也会忽略这一点并向用户提交表单而不显示错误消息

Answer 1

对于 recaptcha v3，您可以执行此操作。我用这个解决了。

<button 
                                data-sitekey="your key" 
                                data-callback='onSubmit' 
                                data-action='submit' 
                                type="submit" class="g-recaptcha btn btn-block btn-lg btn-primary mt-4">Send your message</button>
                        </div>

用这个更新提供的谷歌网站中的代码。基本上，如果没有显示错误，我们会在提交之前手动检查表单验证状态。

<script>
        function onSubmit(token) {            
            var applicationForm = document.getElementById("contact-form");    
            if (applicationForm.checkValidity()) {
                document.getElementById("contact-form").submit();                
            } else {
              applicationForm.reportValidity();
            }
                    
        }
    </script>