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

（我从这里复制了我的答案）

对于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-recaptchadiv下方或下方）：

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