要求用户在提交表单之前点击谷歌的新验证码答案

【问题标题】：Require User to click google's new recaptcha before form submission要求用户在提交表单之前点击谷歌的新验证码
【发布时间】：2015-09-10 02:33:59
【问题描述】：

我在表单 (HTML5) 中使用了谷歌的新验证码： https://www.google.com/recaptcha

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

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

【问题讨论】：

我认为你可以使用 ajax 来实现
你的双胞胎：stackoverflow.com/questions/31016956/…
我同意，但我什至会做些什么来触发 ajax 调用？而且触发也需要时间。
@Dagon 这实际上有点不同，因为我希望它是在 javascript 中触发的事件（不使用 ajax）。我不是在检查验证是否正确，而是在表单提交之前检查是否已经输入。
How can I make reCAPTCHA a required field?的可能重复

标签： javascript php forms recaptcha

【解决方案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");
   }
});

希望对你有所帮助。

【讨论】：

谢谢，这为我节省了很多工作！ BTW，括号有错误，应该是$("form").submit(function(event){ 开头，});结尾。

【解决方案2】：

使用 Ankesh 和 Lammert 解决方案的一部分的普通 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?

【讨论】：

【解决方案3】：

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

等条件下进行检查

grecaptcha.getResponse(opt_widget_id) === ""

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

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

【讨论】：

【解决方案4】：

我试图改进 rylanb 的回答。下面的代码查找页面中所有激活了 g-captcha 并阻止提交的表单。注意：假设您的div.g-recaptcha 是form 的孩子

const forms = document.querySelectorAll('div.g-recaptcha');
forms.forEach(form=> {
    const formParentElement = form.parentElement;

    formParentElement.addEventListener("submit", e => {
        if (grecaptcha.getResponse() === '') {
            e.preventDefault();
            alert('Please check the recaptcha');
        }
    }, false)
});

【讨论】：

【解决方案5】：

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

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

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

<script type="text/javascript">

// 无验证码函数

    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>

【讨论】：