Question Google ReCAPTCHA comment rendre obligatoire?


Est-ce que quelqu'un sait comment faire le "Google ReCAPTCHA (v2)"être" requis "dans un form?

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

J'utilise ParsleyJs dans mon formulaire, mais je n'ai pas trouvé le moyen de le faire fonctionner divs ...


11
2018-04-13 18:52


origine


Réponses:


Vous devez utiliser l'appel de réponse de vérification reCaptcha. Quelque chose comme ça: <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
2018-04-13 19:04



Pour ParsleyJS, vous devrez faire une petite solution:

1.Ajouter un champ de saisie caché, avec data-parsley-required="true", value = "", comme ça:

<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 fonction simple quelque part dans votre code js:

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

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

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

1
2017-09-03 04:17