Question

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

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

Answer 1

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

JavaScript的：

window.onload = function() {
    var $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;
}

Answer 2

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

首先声明一个存储1或0的变量，或者用户是否正确填充了capcha。

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">

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

Answer 3

我发现这是一个快速的＆amp;简单的方法。将其添加到标题中：

<script>
window.onload = function() {
  var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please complete the captcha");
  }
}
</script>

这仅适用于HTML5，并且（或应该）支持这些浏览器：http://caniuse.com/#feat=form-validation

（Chrome中的JS控制台显示此错误消息："Invalid form control" only in Google Chrome，我无法解决此问题。希望其他人可以改进此响应。）

Answer 4

我检查了＃g-recaptcha-response的存在：

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

这应该是文档的一部分......

Answer 5

不确定您是否已经解决了这个问题，但是您可以使用插件来验证Google recaptcha： http://formvalidation.io/addons/recaptcha2/

Answer 6

我觉得这很有帮助：

<div class="g-recaptcha myPopover" data-sitekey="Your Key" 
        data-callback="recaptchaCallback">

使用以下代码将函数添加到data-callback =“ recaptchaCallback”：

var recaptchachecked=false; 
function recaptchaCallback() {
    recaptchachecked = true;
}

和一个函数，您返回的值是在其他html标签中使用的，如下所示：

<form method="post" onsubmit="return isreCaptchaChecked()">
function isreCaptchaChecked()
{
    return recaptchachecked;
}

希望对您有帮助。

Answer 7

如果您想要更友好和更具描述性的消息，可以添加必填复选框。这样可以确保html5弹出窗口显示如下内容：“如果要继续，请选中此框”

<div class="captcha">
   <div class="g-recaptcha" data-sitekey="Your Site Key" data-callback="removeFakeCaptcha"></div>
   <input type="checkbox" class="captcha-fake-field" tabindex="-1" required>
</div>

添加代码以在完成后删除伪造的验证码

window.removeFakeCaptcha = function() {
   document.querySelector('.captcha-fake-field').remove();
}

然后在CSS上隐藏复选框，并将其放置在验证码框中：

.captcha {
  position: relative;
}
.captcha-fake-field {
  background: transparent;
  bottom: 0;
  border: none;
  display: block;
  height: 1px;
  left: 12px;
  width: 1px;
  position: absolute;
  z-index: -1;
}

如何将reCAPTCHA作为必填字段？

7 个答案: