web-dev-qa-db-fra.com

Comment recharger le widget Google Recaptcha après que l'utilisateur ait soumis des entrées non valides

J'ai un formulaire d'inscription avec le nouveau widget Google Recaptcha. Lorsqu'un utilisateur envoie des informations, nous vérifions la validation avec javascript et nous renvoyons les problèmes à la page (ex: "veuillez utiliser un numéro de téléphone valide"). Cependant, comme la page ne se recharge pas, lorsque l'utilisateur entre les informations correctes et va soumettre à nouveau (sans avoir à refaire recaptcha) ... le recaptcha n'est plus valide et il ne peut pas soumettre sans recharger la page. 

y a-t-il une bonne solution à cela? puis-je recharger le widget en quelque sorte? J'ai essayé grecaptcha.render mais il n'a vraiment rien fait.

MODIFIER:

Lorsque j'essaie à nouveau de rendre le widget, il est indiqué que "l'élément d'espace réservé doit être vide"

J'ai essayé de vider l'élément qui semblait fonctionner ($ ('. G-recaptcha'). Empty ();) puis de le rendre, mais la même erreur a été renvoyée.

javascriptruby-on-railsrecaptcha
28
Matthew Berman

La méthode que vous recherchez est grecaptcha.reset()

Cependant, pour que cette fonction fonctionne, vous devez rendre explicitement le reCaptacha comme ceci: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

34
Ghislaindj

J'ai pu le faire simplement en utilisant:

grecaptcha.reset();
7
Waqleh

Si vous utilisez grecaptcha.render avec jQuery, assurez-vous de définir un élément DOM au lieu d'un élément jQuery:

Ce va travail:

grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' });

mais cela ne veut pas :

grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });
7
Déján Kőŕdić

Personnellement, je réinitialise le contenu de mon élément html avec

$('#captcha').html('');

après cela, je recharge Recaptcha en utilisant

$.getScript("https://www.google.com/recaptcha/api.js");

qui charge le contenu recaptcha sur votre

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>
7
Yacine

Voici du code pour accompagner la réponse de @ tzafar:

var myCaptcha = null;
function prepCaptcha() {
    if (myCaptcha === null)
        myCaptcha = grecaptcha.render(document.getElementById('my-captcha'), {
            'sitekey': myCaptchaKey,
            'theme': 'light'
        });
    else
        grecaptcha.reset(myCaptcha);
}

Dans mon cas, my-captcha est l'id d'une div à l'intérieur d'un modal Bootstrap. J'exécute prepCaptcha() dans le gestionnaire d'événements pour l'événement shown.bs.modal du modal. La première fois, il initialise le captcha. Lors des shows suivants du modal, il le réinitialise.

Notez également que vous pouvez rapidement vérifier que vous obtenez un nouveau captcha en imprimant la valeur du captcha complété:

console.log(grecaptcha.getResponse(myCaptcha));

Vous ne devriez pas voir la même valeur deux fois.

6
Mike Spear

votre événement recaptcha render js ne doit être appelé qu'une seule fois dans le script, votre code recaptcha n'est pas valide si l'événement grecaptcha.render js est appelé une deuxième fois dans le script. Vous devriez vérifier votre code pour ne pas appeler la fonction grecaptcha.render une deuxième fois lors du contrôle de validation.

OU 

Dans la console, vous verrez un message d'erreur Uncaught ReferenceError: Recaptcha is not defined, qui indique le problème rencontré avec le script reCAPTCHA. Cela est dû à une mauvaise URL dans la page - http://api.recaptcha.net/js/recaptcha_ajax.js. Google a mis à jour le reCAPTCHA et a déplacé l'emplacement du script sur http://www.google.com/recaptcha/api/js/recaptcha_ajax.js.

aussi vérifier ce post

http://www.instructables.com/id/Fix-reCAPTCHA-errors-on-Instructables/

et ce post

Uncaught ReferenceError: Recaptcha n'est pas défini

3
tzafar

si vous utilisez new recaptcha 2.0, utilisez ceci: pour le code derrière:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

pour javascript simple

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>
0
Sara Khan

J'ai eu le même problème avec excelwebzone/recaptcha-bundle pour Symfony2. En gros, on dit que recaptcha a été chargé dans votre DOM et l’espace réservé qui devrait être vide était plein.

Ces ensembles ne comportent pas de paramètres pour les rappels explicites, donc vous devez vous assurer que cet espace réservé ou même le formulaire entier est vide avant de charger recaptcha.

Et le mien était coincé dans DOM parce que je le chargeais avec AJAX. Au deuxième appel, c'était là.

Vous pouvez simplement utiliser $('#your-div-with-form').html('')

0
Marek Opatřil

Si vous utilisez WordPress, assurez-vous de ne pas installer un autre plug-in reCaptcha ... c'est le problème qui me concerne.

0
Elon Zito

Essayez d’appeler la fonction reload() dans ReCaptcha (version 1):

Recaptcha.reload();

Comment recharger ReCaptcha en utilisant JavaScript?

0
StaticVoid
<script>
function cform(token) {
$.ajax({
type: 'POST',
url: 'contact_chk.php',
data: $('#cform').serialize(), 
success: function(response) {
grecaptcha.reset();
$("#con_msg").html(response);
document.getElementById("name").value='';
document.getElementById("subject").value='';
document.getElementById("email").value='';
document.getElementById("phone").value='';
document.getElementById("message").value='';
},
error: function(response) {
grecaptcha.reset();
$("#con_msg").html('Try Again...');
}
});
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
0
Utsav Kundu