如何使 reCAPTCHA 成为必填字段？

Question

我正在使用 Google reCAPTCHA，并且能够在表单内将 CAPTCHA 组件添加到我的页面。但是当我提交表单时，没有进行任何验证来检查验证码是否已被解决。

提交表单时如何验证 CAPTCHA 组件是否已解决？或者，换句话说，如何使我的 CAPTCHA 组件成为必需的？

原文由 Baikare Sandip 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想使用原生的 html5 弹出窗口，这里是解决方案

脚本：

 window.addEventListener('load', () => {
  const $recaptcha = document.querySelector('#g-recaptcha-response');
  if ($recaptcha) {
    $recaptcha.setAttribute('required', 'required');
  }
})

CSS：

 #g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -78px 0 0 0 !important;
  width: 302px !important;
  height: 76px !important;
  z-index: -999999;
  opacity: 0;
}

原文由 Fred 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了和你一样的问题，并以这种方式解决了它：

首先声明一个存储 1 或 0 的变量，具体取决于用户是否正确填写了验证码。

 var allowSubmit = false;

然后你需要一个在用户正确填写 reCapcha 时执行的函数：

 function capcha_filled () {
    allowSubmit = true;
}

…和一个在 reCapcha 会话过期时执行的函数：

 function capcha_expired () {
    allowSubmit = false;
}

要告诉 reCapcha 您的函数（回调），请在您的 html 中设置那些 data- 属性：

 <div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

或者，如果您使用显式加载：

   var onloadCallback = function() {
    grecaptcha.render('your_div_id', {
      'sitekey' : 'your_site_key',
      'callback': capcha_filled,
      'expired-callback': capcha_expired,
    });
  };

您还需要表单提交的回调：

 function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

最后在表单中添加 onsubmit 属性：

 <form action="..." onsubmit="check_if_capcha_is_filled">

---

注意： 如评论中所述， 仍然需要服务器验证。该代码可防止意外提交表单，除非验证码已填写，并且 仅供用户使用。

原文由 Al.G. 发布，翻译遵循 CC BY-SA 3.0 许可协议