reCAPTCHA Unsichtbar - Formular erneut senden Problem

Question

Bei der Verwendung von reCaptcha hatte ich ein Problem. Im Code mit AJAX, um das Formular zu senden. Vor dem Absenden muss ich prüfen, ob die Felder ausgefüllt sind oder nicht. Wenn die Felder nicht ausgefüllt sind, sollte die Übermittlung nicht stattfinden.

Wenn Textfelder nicht gefüllt sind, wird in diesem Fall eine Warnung ausgegeben.

Das Problem ist nach der Ablehnung des ungültigen Beitrags, der Submit-Button funktioniert nicht mehr wie 2 oder 3 Minuten und es gibt keinen Fehler von reCaptcha. Nach Ablauf der Zeit beginnt reCaptcha erneut zu arbeiten und sendet die Button-Funktion.

<form id="contact-form" method="post" action="javascript:void(0)"> 
     <input type="text" placeholder="Name" id="name"> 
     <input type="text" placeholder="E-Mail" id="email"> 
     <textarea placeholder="Message" id="message">/textarea> 
     <button class="g-recaptcha pull-right" data-sitekey="#your-site-key" data-callback="sendData" type="submit"> SEND <i class="flaticon-origami34"></i> </button> 
</form> 

Javascripts:

function sendData(){ 

    console.log('send data - '); // --> works 

    //send datas: 

    $("#contact-form").submit(); 

}; 

$('#contact-form').on("submit", function() { 

console.log('clicked submit'); // --> works 

name = $('#name').val().replace(/<|>/g, ""), // prevent xss 
    email = $('#email').val().replace(/<|>/g, ""), 
    msg = $('#message').val().replace(/<|>/g, ""); 

if (name == '' || email == '' || msg == '') { 

    alert("Please fill all areas !"); 

} else { 

    console.log('captcha response: ' + grecaptcha.getResponse()); // --> captcha response: 

    // ajax to the php file to send the mail 
    $.ajax({ 
     type: "POST", 
     url: "SaveContact.php", 
     data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse() 
    }).done(function(status) { 
     if (status == "ok") { 
      // clear the form fields 
      $('#name').val(''); 
      $('#email').val(''); 
      $('#message').val(''); 
     } 
    }); 

}}); 

Answer 1

Dann brauchen Sie Abklingzeit von 'unsichtbaren recaptcha zurücksetzen möchten, können Sie einen Hack wie dieses Ich

var recaptchaIframe = document.querySelector('.grecaptcha-badge iframe'); 
recaptchaIframe.src = recaptchaIframe.src; 

verwenden keine bessere Lösung.

Answer 2

Gemäß der documentation können Sie auch grecaptcha.reset(opt_widget_id); anrufen, wobei opt_widget_id optional ist und standardmäßig das erste recaptcha Widget erstellt wird.

Answer 3

wenn Sie machen recaptcha explizit in einem Skript wie folgt:

var form = grecaptcha.render('idSelector', { 
    'sitekey' : 'your_sitekey', 
    'callback': callableFunction 

}, true) 

dann, "Form" Variable enthält widget_id, so dass Sie, dass recaptcha wie diese

zurücksetzen

grecaptcha.reset(form); 

Answer 4

diese Figured und wollte es posten, falls jemand anderes das gleiche Problem hat. Googles Beispiel-Code-Set ist die Button-ID als "submit" und der Aufruf der Funktion "submit" innerhalb von onSubmit war deswegen nicht erfolgreich. Ändern der ID zu etwas anderem hat es behoben.