Google ReCAPTCHA come rendere necessario?

Question

Qualcuno sa come rendere "Google ReCAPTCHA (v2)" "necessario" in un form?

Non intendo alcun invio di moduli fino al completamento del recaptcha?

Io uso ParsleyJs nella mia forma, ma ha ancora trovato un modo per farlo funzionare con div s ...

Answer 1

Devi usare il reCaptcha verificare chiamata risposta indietro. Qualcosa di simile a questo: <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 */ 
    } 
}) 

Answer 2

Per ParsleyJS si vuole fare un po 'di soluzione:

1.Add campo di input nascosto, con data-parsley-required="true", value = "", in questo modo:

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

2. Aggiungi il contenitore degli errori (appena sotto o sotto il tuo g-recaptcha div):

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

3.Aggiungere questa semplice funzione da qualche parte nel codice js:

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

4.Aggiungere l'attributo data-callback con valore della funzione personalizzata:.

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