Google ReCAPTCHA comment rendre nécessaire?
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 div
s...
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 */
}
})
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>