Google ReCAPTCHA wie erforderlich machen?

Question

Weiß jemand, wie man die "Google ReCAPTCHA (v2)" in einem form "erforderlich" machen kann?

Ich meine keine Form Vorlage bis Recaptcha ist ausgefüllt?

ich ParsleyJs in meiner Form verwenden, aber nicht einen Weg, damit es funktioniert mit div s ...

Answer 1

Sie haben zu verwenden, die reCaptcha Antwort Anruf überprüfen zurück zu finden. Etwas wie folgt aus: <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

Für ParsleyJS Sie werden ein wenig Abhilfe zu tun:

1.Add versteckte Eingabefeld, mit data-parsley-required="true", value = "", wie folgt aus:

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

2. Fügen Sie einen Fehlercontainer (direkt unter oder unter Ihrem g-recaptcha div) hinzu:

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

3.Add diese einfache Funktion irgendwo in Ihrem js Code:

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

4.Add das Attribut data-callback mit dem Wert der benutzerdefinierten Funktion.

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