jquery - reCaptcha Invisible，欧芹和ajax形式

Question

我正在尝试从使用 Google reCaptcha v2 迁移到不可见的 reCaptcha。我使用 Parsley.js 进行表单验证，并使用 Malsup Ajax 表单插件提交表单。我当前的代码如下所示:

HTML:

<form action="send1.php" method="post" class="contact_form">        
<label for="name_1">Name</label>
<input type="text" name="name_1" id="name_1" value="" required />
<div class="g-recaptcha" data-sitekey="XXX"></div>
<input type="submit" class="button" value="">
</form>

JS:

$('.contact_form').parsley();
$('.contact_form').submit(function(){
    if($('.contact_form').parsley().validate()){
        $('.contact_form').ajaxSubmit(); 
    }
    return false;
});  

这成功地将 g-recaptcha-response 传递到 send1.php，其中 reCaptcha 被验证。

如何将 Invisible reCaptcha 与此脚本集成？

我尝试使用这个:

    <div id='recaptcha' class="g-recaptcha"
          data-sitekey="XXX"
          data-callback="onSubmit"
          data-size="invisible"></div>
 </div>

但我不知道如何使用数据回调。如果我添加

grecaptcha.execute();

在 ajaxSubmit() 之前，字段 g-recaptcha-response 被添加到 Ajax 调用中，但它的值为空...

请问有什么帮助吗？

Answer 1

(我从here复制了我的答案)

对于ParsleyJS你需要做一些解决方法:

1.添加隐藏输入字段，data-parsley-required="true", value = ""，如下所示:

<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">

2.添加错误容器(就在 g-recaptcha div 下方或下方):

<span id='errorContainer'></span>

3.在 js 代码中的某个位置添加这个简单的函数:

function recaptchaCallback() {
    document.getElementById('myField').value = 'nonEmpty';
}

4.添加属性data-callback，值为自定义函数:

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>