Google ReCAPTCHA comment rendre nécessaire?

<!-Est-ce que quelqu'un sait comment faire le "Google ReCAPTCHA (v2)" être "nécessaire" dans un form?

je veux dire pas de soumission de formulaire jusqu'à ce que recaptcha soit rempli?

J'utilise ParsleyJs dans ma forme, mais je n'ai pas trouvé un moyen de le faire fonctionner avec divs...

12
demandé sur Shahar Shukrani 2015-04-13 21:52:30

2 réponses

vous devez utiliser le reCaptcha vérifier la réponse rappeler. Quelque chose comme ceci: <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 */
    }
})
14
répondu colecmc 2017-03-17 17:14:39

Pour ParsleyJS vous aurez à faire un peu de solution de contournement:

1.Ajouter un champ caché, avec data-parsley-required="true",value = "", comme ceci:

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

2.Ajouter un conteneur d'erreur (juste en dessous ou sous votre g-recaptcha div):

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

3.Ajoutez cette simple fonction quelque part dans votre code js:

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

4.Ajouter l'attribut data-callback à la valeur de la fonction personnalisée:

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>
1
répondu Shahar Shukrani 2017-09-03 04:17:28