webentwicklung-frage-antwort-db.com.de

So laden Sie das Google Recaptcha-Widget erneut, nachdem der Benutzer ungültige Eingaben übermittelt hat

Ich habe ein Anmeldeformular mit dem neuen Google Recaptcha-Widget darauf. Wenn ein Benutzer Informationen übermittelt, überprüfen wir die Validierung mit Javascript und geben die Probleme auf die Seite zurück (z. B. "Bitte verwenden Sie eine gültige Telefonnummer"). Da die Seite jedoch nicht neu geladen wird, wenn der Benutzer korrekte Informationen eingibt und erneut gesendet wird (ohne das Recaptcha erneut ausführen zu müssen), ist das Recaptcha nicht mehr gültig und er kann nicht ohne erneute Laden der Seite senden. 

gibt es dafür eine gute Lösung? kann ich das Widget irgendwie neu laden? Ich habe Grecaptcha.Render ausprobiert, aber es hat wirklich nichts getan.

BEARBEITEN:

Wenn ich versuche, das Widget erneut zu rendern, heißt es: "Platzhalterelement muss leer sein"

Ich habe versucht, das Element, das zu funktionieren schien, zu leeren ($ ('. G-recaptcha'). Empty ();) und dann zu rendern, aber es war immer noch derselbe Fehler.

javascriptruby-on-railsrecaptcha
28
Matthew Berman

Die Methode, die Sie suchen, ist grecaptcha.reset()

Damit diese Funktion jedoch funktioniert, müssen Sie den reCaptacha explizit wie folgt darstellen: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

34
Ghislaindj

Ich konnte es einfach machen, indem ich

grecaptcha.reset();
7
Waqleh

Wenn Sie grecaptcha.render mit jQuery verwenden, stellen Sie sicher, dass Sie das DOM-Element anstelle des jQuery-Elements festlegen:

Dieses wird funktionieren:

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

aber das wird nicht:

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

Ich persönlich setze mein Element HTML-Inhalt mit zurück

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

danach lade ich recaptcha erneut mit

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

welche recaptcha inhalt auf ihrem laden

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

Hier ist ein Code für die Antwort von @ tzafar:

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

In meinem Fall ist my-captcha die ID einer div innerhalb eines Bootstrap-Modals. Ich führe prepCaptcha() im Eventhandler für das shown.bs.modal-Ereignis des Modals aus. Beim ersten Mal wird das Captcha initialisiert. Bei nachfolgenden Shows des Modals wird es zurückgesetzt.

Beachten Sie auch, dass Sie schnell überprüfen können, ob Sie ein neues Captcha erhalten, indem Sie den Wert des vollständigen Captcha drucken:

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

Sie sollten den gleichen Wert nicht zweimal sehen.

6
Mike Spear

ihr recaptcha render js -Ereignis sollte nur einmal im Skript aufgerufen werden. Ihr Recaptcha-Code ist ungültig, wenn grecaptcha.render js-Ereignis zum zweiten Mal im Skript aufgerufen wird. Sie sollten Ihren Code überprüfen, damit er die grecaptcha.render-Funktion bei der Validierungsprüfung nicht zum zweiten Mal aufrufen kann.

ODER 

In der Konsole wird eine Uncaught ReferenceError: Recaptcha is not defined-Fehlermeldung angezeigt, die auf das Problem mit dem reCAPTCHA-Skript hinweist. Dies liegt an einer fehlerhaften URL in der Seite - http://api.recaptcha.net/js/recaptcha_ajax.js. Google hat den reCAPTCHA aktualisiert und den Speicherort des Skripts nach http://www.google.com/recaptcha/api/js/recaptcha_ajax.js verschoben.

Überprüfen Sie auch diesen Beitrag

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

und diesen Beitrag

Nicht abgerufener ReferenceError: Recaptcha ist nicht definiert

3
tzafar

wenn Sie das neue Recaptcha 2.0 verwenden, verwenden Sie Folgendes:

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

für einfaches Javascript

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

Ich hatte das gleiche Problem mit excelwebzone/recaptcha-bundle für Symfony2. Grundsätzlich heißt es, dass recaptcha in der Vergangenheit in Ihr DOM geladen wurde und der Platzhalter, der leer sein sollte, voll war .

Diese Pakete haben keine Einstellungen für explizite Rückrufe, also Sie müssen sicherstellen, dass der Platzhalter oder das gesamte Formular leer ist, bevor Sie recaptcha laden.

Meiner steckte in DOM fest, weil ich es mit AJAX lud. Beim zweiten Anruf war es da.

Sie können einfach $('#your-div-with-form').html('') verwenden.

0
Marek Opatřil

Wenn Sie WordPress verwenden, stellen Sie sicher, dass kein anderes reCaptcha-Plugin installiert ist.

0
Elon Zito

Versuchen Sie, die Funktion reload() in ReCaptcha (Version 1) aufzurufen:

Recaptcha.reload();

Wie lade ich ReCaptcha mit 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