I'm trying to migrate from using Google reCaptcha v2 to the invisible reCaptcha. I use Parsley.js for form validation and submit the form using the Malsup Ajax form plugin. my current code looks like this :
我正在尝试从使用Google reCaptcha v2迁移到隐形reCaptcha。我使用Parsley.js进行表单验证，并使用Malsup Ajax表单插件提交表单。我当前的代码如下所示：
HTML:
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:
JS：
$('.contact_form').parsley();
$('.contact_form').submit(function(){
if($('.contact_form').parsley().validate()){
$('.contact_form').ajaxSubmit();
}
return false;
});
this successfully passes a g-recaptcha-response to send1.php, where the reCaptcha is validated.
这成功地将g-recaptcha-response传递给send1.php，其中验证了reCaptcha。
How can i integrate Invisible reCaptcha with this script?
如何将Invisible reCaptcha与此脚本集成？
i tried using this:
我试过用这个：
<div id='recaptcha' class="g-recaptcha"
data-sitekey="XXX"
data-callback="onSubmit"
data-size="invisible"></div>
</div>
But I'm not sure how to use the data-callback. If I add
但我不确定如何使用数据回调。如果我加
grecaptcha.execute();
Before the ajaxSubmit() then the field g-recaptcha-response is added to the Ajax call, but it's value is blank...
在ajaxSubmit（）之前，字段g-recaptcha-response被添加到Ajax调用中，但它的值是空白的...
Any help, please?
有什么帮助吗？
3 个解决方案
#1
1
I'll share with you how I got ParsleyJS and Invisible reCaptcha working for me. Below is the code I used. This was POC code only, not production; and I did not do an AJAX post. And please excuse any uglyness, because I had to strip out a lot of fluff:
我将与您分享我是如何让ParsleyJS和Invisible reCaptcha为我工作的。以下是我使用的代码。这只是POC代码，不是生产;我没有做AJAX帖子。请原谅任何丑陋，因为我不得不剥掉很多绒毛：
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../node_modules/parsleyjs/dist/parsley.min.js"></script>
</head>
<body>
<form action="#" data-parsley-validate class="js-validate">
<div>
<label for="input-first-name">First Name*</label>
<input
type="text"
id="input-first-name"
name="first-name"
data-parsley-trigger="blur"
data-parsley-error-message="First Name is required"
required>
</div>
<div>
<label for="input-last-name">Last Name*</label>
<input
type="text"
name="last-name"
id="input-last-name"
data-parsley-trigger="blur"
data-parsley-error-message="Last Name is required"
required>
</div>
<div>
<button type="submit" id="theSubmitBtn">Submit</button>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script>
function onScriptLoad() {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
sitekey: 'Your_Site_Key',
size: 'invisible',
callback: function (token) {
$('.js-validate').submit();
console.log('test: ',token);
}
};
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);
$('#theSubmitBtn').click(function(e){
e.preventDefault();
if(grecaptcha.getResponse() != ''){
grecaptcha.reset();
}
grecaptcha.execute();
});
}
</script>
<div id='recaptcha' class="g-recaptcha"></div>
</form>
</body>
</html>
So if you want to do submit via AJAX, you can add a ParsleyJS event listener and do your Ajax call that way.
因此，如果你想通过AJAX提交，你可以添加一个ParsleyJS事件监听器并以这种方式进行Ajax调用。
$('.js-validate').parsley().on('form:submit', function() {
//AJAX post here
return false;
});
I based my solution mostly off this post (so credit to him): Invisible google Recaptcha and ajax form
我的解决方案主要基于这篇文章（因此归功于他）：Invisible google Recaptcha和ajax表单
Hope it helps, because I also looked for solutions for a while.
希望它有所帮助，因为我也寻找了一段时间的解决方案。
#2
3
(I Copied my answer from here)
（我从这里复制了我的答案）
For ParsleyJS you will to do a little workaround:
对于ParsleyJS，您将做一些解决方法：
1.Add hidden input field, with data-parsley-required="true", value = "", like this:
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.Add error container (just below or under your g-recaptcha div):
2.添加错误容器（在你的g-recaptcha div下面或下面）：
<span id='errorContainer'></span>
3.Add this simple function somewhere in your js code:
3.在你的js代码中的某处添加这个简单的函数：
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add the attribute data-callback with value of custom function:
4.使用自定义函数的值添加属性data-callback：
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
#3
0
I hope this will help you out, I haven't dealt with parsley, but the way reCaptcha integrates with it should be the same. Let me know if you have any questions!
我希望这会帮助你，我没有处理过欧芹，但reCaptcha与它集成的方式应该是一样的。如果您有任何疑问，请告诉我！
I use a method like this to render my reCaptchas. This allows you to have multiple captchas on the same page, as well as validation.
我使用这样的方法来渲染我的reCaptchas。这允许您在同一页面上具有多个验证码以及验证。
For form validation, I've added your parsley validation to the below function. Notice that if the validation returns false, we reset the captcha... this is important. If that doesn't happen, the form cannot be re-submitted.
对于表单验证，我已将您的欧芹验证添加到以下函数中。请注意，如果验证返回false，我们重置验证码......这很重要。如果没有发生，则无法重新提交表单。
function renderRecaptcha() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var button = form.querySelector('[data-sitekey]');
if (null === button) {
continue;
}
(function (frm) {
var sitekey = button.getAttribute("data-sitekey");
var buttonId = grecaptcha.render(button, {
"sitekey": sitekey,
"size": "invisible",
"badge": "inline",
"callback": function (recaptchaToken) {
if ($(frm).parsley().validate()) {
$(frm).ajaxSubmit();
// HTMLFormElement.prototype.submit.call(frm);
} else {
grecaptcha.reset(buttonId);
}
}
});
frm.onsubmit = function (evt) {
evt.preventDefault();
grecaptcha.execute(buttonId);
};
})(form);
}
}
Your button will be what has the sitekey instead of a div. This simplifies things a lot.
你的按钮将是sitekey而不是div。这简化了很多事情。
<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>
#1
1
I'll share with you how I got ParsleyJS and Invisible reCaptcha working for me. Below is the code I used. This was POC code only, not production; and I did not do an AJAX post. And please excuse any uglyness, because I had to strip out a lot of fluff:
我将与您分享我是如何让ParsleyJS和Invisible reCaptcha为我工作的。以下是我使用的代码。这只是POC代码，不是生产;我没有做AJAX帖子。请原谅任何丑陋，因为我不得不剥掉很多绒毛：
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../node_modules/parsleyjs/dist/parsley.min.js"></script>
</head>
<body>
<form action="#" data-parsley-validate class="js-validate">
<div>
<label for="input-first-name">First Name*</label>
<input
type="text"
id="input-first-name"
name="first-name"
data-parsley-trigger="blur"
data-parsley-error-message="First Name is required"
required>
</div>
<div>
<label for="input-last-name">Last Name*</label>
<input
type="text"
name="last-name"
id="input-last-name"
data-parsley-trigger="blur"
data-parsley-error-message="Last Name is required"
required>
</div>
<div>
<button type="submit" id="theSubmitBtn">Submit</button>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>
<script>
function onScriptLoad() {
var htmlEl = document.querySelector('.g-recaptcha');
var captchaOptions = {
sitekey: 'Your_Site_Key',
size: 'invisible',
callback: function (token) {
$('.js-validate').submit();
console.log('test: ',token);
}
};
recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, false);
$('#theSubmitBtn').click(function(e){
e.preventDefault();
if(grecaptcha.getResponse() != ''){
grecaptcha.reset();
}
grecaptcha.execute();
});
}
</script>
<div id='recaptcha' class="g-recaptcha"></div>
</form>
</body>
</html>
So if you want to do submit via AJAX, you can add a ParsleyJS event listener and do your Ajax call that way.
因此，如果你想通过AJAX提交，你可以添加一个ParsleyJS事件监听器并以这种方式进行Ajax调用。
$('.js-validate').parsley().on('form:submit', function() {
//AJAX post here
return false;
});
I based my solution mostly off this post (so credit to him): Invisible google Recaptcha and ajax form
我的解决方案主要基于这篇文章（因此归功于他）：Invisible google Recaptcha和ajax表单
Hope it helps, because I also looked for solutions for a while.
希望它有所帮助，因为我也寻找了一段时间的解决方案。
#2
3
(I Copied my answer from here)
（我从这里复制了我的答案）
For ParsleyJS you will to do a little workaround:
对于ParsleyJS，您将做一些解决方法：
1.Add hidden input field, with data-parsley-required="true", value = "", like this:
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.Add error container (just below or under your g-recaptcha div):
2.添加错误容器（在你的g-recaptcha div下面或下面）：
<span id='errorContainer'></span>
3.Add this simple function somewhere in your js code:
3.在你的js代码中的某处添加这个简单的函数：
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add the attribute data-callback with value of custom function:
4.使用自定义函数的值添加属性data-callback：
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
#3
0
I hope this will help you out, I haven't dealt with parsley, but the way reCaptcha integrates with it should be the same. Let me know if you have any questions!
我希望这会帮助你，我没有处理过欧芹，但reCaptcha与它集成的方式应该是一样的。如果您有任何疑问，请告诉我！
I use a method like this to render my reCaptchas. This allows you to have multiple captchas on the same page, as well as validation.
我使用这样的方法来渲染我的reCaptchas。这允许您在同一页面上具有多个验证码以及验证。
For form validation, I've added your parsley validation to the below function. Notice that if the validation returns false, we reset the captcha... this is important. If that doesn't happen, the form cannot be re-submitted.
对于表单验证，我已将您的欧芹验证添加到以下函数中。请注意，如果验证返回false，我们重置验证码......这很重要。如果没有发生，则无法重新提交表单。
function renderRecaptcha() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var button = form.querySelector('[data-sitekey]');
if (null === button) {
continue;
}
(function (frm) {
var sitekey = button.getAttribute("data-sitekey");
var buttonId = grecaptcha.render(button, {
"sitekey": sitekey,
"size": "invisible",
"badge": "inline",
"callback": function (recaptchaToken) {
if ($(frm).parsley().validate()) {
$(frm).ajaxSubmit();
// HTMLFormElement.prototype.submit.call(frm);
} else {
grecaptcha.reset(buttonId);
}
}
});
frm.onsubmit = function (evt) {
evt.preventDefault();
grecaptcha.execute(buttonId);
};
})(form);
}
}
Your button will be what has the sitekey instead of a div. This simplifies things a lot.
你的按钮将是sitekey而不是div。这简化了很多事情。
<button type="submit" class="common-form__submit" data-sitekey="SITEKEY_HERE">Send Your Request</button>