Google ReCAPTCHA how to make required?
Does anyone know how to make the "Google ReCAPTCHA (v2)" be "required" in a form
?
I mean no form submission until recaptcha is filled-in?
I use ParsleyJs in my form, but didnt find a way to make it work with div
s...
You have to use the reCaptcha verify response call back. Something like this: <script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>
var RC2KEY = 'sitekey',
doSubmit = false;
function reCaptchaVerify(response) {
if (response === document.querySelector('.g-recaptcha-response').value) {
doSubmit = true;
}
}
function reCaptchaExpired () {
/* do something when it expires */
}
function reCaptchaCallback () {
/* this must be in the global scope for google to get access */
grecaptcha.render('id', {
'sitekey': RC2KEY,
'callback': reCaptchaVerify,
'expired-callback': reCaptchaExpired
});
}
document.forms['form-name'].addEventListener('submit',function(e){
if (doSubmit) {
/* submit form or do something else */
}
})
For ParsleyJS you will to do a little workaround:
1.Add hidden input field, with data-parsley-required="true"
, value = ""
, like this:
<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):
<span id='errorContainer'></span>
3.Add this simple function somewhere in your js code:
function recaptchaCallback() {
document.getElementById('myField').value = 'nonEmpty';
}
4.Add the attribute data-callback
with value of custom function:
<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>