Comment recharger le widget Google recaptcha après que l'utilisateur ait soumis des entrées invalides

j'ai un formulaire d'inscription avec le nouveau widget Google recaptcha dessus. Quand un utilisateur soumet des informations, nous vérifions la validation avec javascript et retournons les problèmes à la page (ex: "please use a valid phone number"). cependant, puisque la page ne se recharge pas, lorsque l'utilisateur entre les informations correctes et va soumettre à nouveau (sans avoir à faire le recaptcha à nouveau)...le recaptcha n'est plus valide et qu'ils ne peuvent pas soumettre sans recharger la page.

est-il un la bonne solution? je peux recharger le widget? j'ai essayé grecaptcha.rendre, mais il n'a pas vraiment faire quoi que ce soit.

EDIT:

quand j'essaie de rendre le widget à nouveau, il est dit "l'élément de remplacement doit être vide "

j'ai essayé de vider l'élément qui semblait fonctionner ($('.g-recaptcha").empty();) puis rendering mais il a quand même lancé la même erreur.

26
demandé sur Matthew Berman 2014-12-20 01:21:53

11 réponses

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

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

33
répondu Ghislaindj 2014-12-30 10:38:51

si vous utilisez grecaptcha.rendu avec jQuery, s'il vous plaît assurez-vous que vous définissez effectivement L'élément DOM, au lieu de l'élément jQuery:

Ce sera "151960920 de travail": 

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

mais ce l'habitude : 

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

j'ai pu le faire juste en utilisant: 

grecaptcha.reset();
7
répondu Waqleh 2016-06-18 21:13:58

voici un 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. Sur les représentations suivantes du modal, il le réinitialise.

aussi, notez que vous pouvez vérifier rapidement que vous recevez un nouveau captcha en imprimant le captcha complété valeur: 

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

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

6
répondu Mike Spear 2016-07-24 02:07:55

personnellement j'ai réinitialisé mon élément contenu html avec 

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

après cela je recharge recaptcha en utilisant 

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

qui chargent recaptcha contenu sur votre 

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>
5
répondu Yacine 2017-11-14 05:51:08

votre événement de rendu de recaptcha js ne doit être appelé qu'une seule fois dans le script, votre code de recaptcha n'est pas valide si grecaptcha.render événement de JS appelé deuxième fois dans le script. Vous devriez vérifier votre code de sorte qu'il ne devrait pas appeler la grecaptcha.render fonction deuxième fois sur validation.

ou

dans la console, vous verrez un message d'erreur Uncaught ReferenceError: Recaptcha is not defined , qui indique le problème 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 déplacé l'emplacement du script à http://www.google.com/recaptcha/api/js/recaptcha_ajax.js .

aussi vérifier ce message ""

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

et ce post

Uncaught Referenceeror: Recaptcha is not defined

3
répondu tzafar 2017-05-23 12:34:41

si vous utilisez New recaptcha 2.0 utilisez cette: 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
répondu Sara Khan 2015-04-24 11:29:27

j'ai eu le même problème avec excelwebzone/recaptcha-bundle pour Symfony2. Basicly est dit que recaptcha a été chargé dans le passé à votre DOM et le conteneur qui devrait être vide était plein .

ces paquets n'ont pas de paramètres pour les callbacks explicites donc vous devez vous assurer que le conteneur ou même le formulaire entier est vide avant de charger recaptcha .

et le mien était coincé dans DOM car je le chargeais avec de L'AJAX. Sur deuxième appel, il était là.

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

0
répondu Marek Opatřil 2015-12-25 21:01:15

essayez d'appeler la fonction reload() dans ReCaptcha (version 1): 

Recaptcha.reload();

Comment recharger ReCaptcha en utilisant JavaScript?

0
répondu StaticVoid 2017-05-23 10:31:11 
<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
répondu Utsav Kundu 2017-09-14 05:51:59

si vous utilisez WordPress, assurez-vous que vous n'avez pas un autre plugin reCaptcha installé...c'était le problème pour moi.

0
répondu Elon Zito 2018-04-10 19:02:32