Question

我在我的表单（HTML5）中使用google的新重新标记： https://www.google.com/recaptcha

在提交表单之前，有没有办法检查并标记recaptcha？我想在客户端而不是服务器端验证这一点。这样，我就不必回到表单并警告用户不要为验证码输入任何内容。

我可以使用任何javascript检查用户是否在recaptcha中输入任何内容？

Answer 1

您可以查看ID为g-recaptcha-response的textarea字段。您可以执行以下操作：

$("form").submit(function(event) {

   var recaptcha = $("#g-recaptcha-response").val();
   if (recaptcha === "") {
      event.preventDefault();
      alert("Please check the recaptcha");
   }
});

希望这会对你有所帮助。

Answer 2

使用Ankesh和Lammert解决方案的部分实现的vanilla JavaScript实现：

var form = document.getElementById('ctct-custom-form');
form.addEventListener("submit", function(event){
    if (grecaptcha.getResponse() === '') {                            
      event.preventDefault();
      alert('Please check the recaptcha');
    }
  }
, false);

信用表单提交监听器代码：How can I listen to the form submit event in javascript?

Answer 3

grecaptcha.getResponse() - 返回Recaptcha的响应。您可以在

等条件下查看此信息

grecaptcha.getResponse(opt_widget_id) === ""

可选小部件ID，默认为未指定时创建的第一个小部件。

参考：https://developers.google.com/recaptcha/docs/display

Answer 4

最简单的方法是更改按钮类型。

    <button class="theme-btn" type="button" onclick="checkForm()" id="sign_up_button" >

现在创建一个 Java Script 函数来更改验证时提交的类型。

<script type="text/javascript">

// NoCaptcha 函数

    function checkForm(){
      
        if(!document.getElementById("g-recaptcha-response").value){
            alert("Please Prove ! You're not a Robot");
            return false;
        }else{
            document.getElementById("sign_up_button").type = "submit";                
            return true;
        }
    }

 </script>

Answer 5

我试图改善rylanb的答案。下面的代码在页面中找到已激活g-captcha的所有表单，并阻止其提交。注意：假设您的div.g-recaptcha是form的孩子

var forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(element => {
    element.parentElement.addEventListener("submit", function(event) {
        if (grecaptcha.getResponse() === '') {
            event.preventDefault();
            alert('Please check the recaptcha');
        }
    }, false)
});

要求用户在表单提交前单击谷歌的新重新访问

5 个答案: