如何将reCAPTCHA作为必填字段？

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您的函数(回调),请data-在html中设置这些属性:

<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

我发现这是一种快速简便的方法.将其添加到标题中:

<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控制台仅在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

2022 年工作解决方案

就我个人而言，我无法让上述任何解决方案与我的验证码一起使用。所以我想我会为那些面临同样问题的人分享我当前的工作解决方案。

接受的答案没有验证码过期时的验证技术，以下解决方案解决了这个问题。

我的笔记.js应该彻底解释解决方案。

JavaScript

// By default do not allow form submission.
var allow_submit = false

function captcha_filled () {
    /*
     * This is called when Google get's the recaptcha response and approves it.
     * Setting allow_submit = true will let the form POST as normal.
     * */

    allow_submit = true
}

function captcha_expired () {
    /*
     * This is called when Google determines too much time has passed and expires the approval.
     * Setting allow_submit = false will prevent the form from being submitted.
     * */

    allow_submit = false
}


function check_captcha_filled (e) {
    console.log('captcha-verified')
    /*
     * This will be called when the form is submitted.
     * If Google determines the captcha is OK, it will have
     * called captcha_filled which sets allow_submit = true
     * If the captcha has not been filled out, allow_submit
     * will still be false.
     * We check allow_submit and prevent the form from being submitted
     * if the value of allow_submit is false.
     * */

    // If captcha_filled has not been called, allow_submit will be false.
    // In this case, we want to prevent the form from being submitted.
    if (!allow_submit) {
        // This call prevents the form submission.
        // e.preventDefault()

        // This alert is temporary - you should replace it with whatever you want
        // to do if the captcha has not been filled out.
        alert('ERROR: Please verify you are human by filling out the captcha')

        return false
    }
    captcha_expired()
    return true
}

超文本标记语言

<form action="post" onsubmit="return check_captcha_filled()">
<!-- form items -->
<div class="g-recaptcha"
   data-callback="captcha_filled"
   data-expired-callback="captcha_expired"
   data-sitekey="your site key">
</div>
</form>