Fehler: ReCAPTCHA Platzhalterelement muss leer sein

Question

Ich verwende Recaptcha mit meiner Laravel-Anwendung.

Ich will nur recaptcha Antwort auf Formular überprüfen einreichen jquery verwenden und Benutzer von Alarm zu stoppen, die Captcha pleade validieren.

aber, ich konnte nicht Formularübermittlung beendet, auch wenn Captcha nicht gefüllt ist.

hier ist mein Code.

$('#payuForm').on('submit', function (e) { 

        var response = grecaptcha.getResponse(); 

        if(response.length == 0 || response == '' || response ===false) { 
         alert('Please validate captcha.'); 
         e.preventDefault(); 
        } 
       }); 



<div class="captcha"> 
{{ View::make('recaptcha::display') }} 
</div> 

Ich bekomme diesen Fehler in der Browser-Konsole, und Formular wird gesendet.

Error: ReCAPTCHA placeholder element must be empty 

Answer 1

Sie laden die google recaptcha-Bibliothek zweimal.

https://www.google.com/recaptcha/api.js

Answer 2

Ich verwende ContactForm7 für Wordpress, die eine eingebaute Integration mit Recaptcha hat. Ich habe auch das BWP Recaptcha-Plugin, das die gleichen Recaptcha-Bibliotheken verwendet. Ich hatte fälschlicherweise meine Aktivierungsschlüssel zu beiden hinzugefügt, was dazu führte, dass die js-Bibliothek zweimal geladen wurde. Sobald ich die Schlüssel vom CF7-Plugin entfernte, ging der Fehler weg.

Answer 3

In AngularJs verursacht dieser Fehler solche Probleme Sie können auch für jquery überprüfen.

Answer 4

Sie laden die Bibliothek 2 mal

wählte

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 

oder

 <script src="https://www.google.com/recaptcha/api.js" async defer></script> 

Answer 5

Gerade diese auf der Seite für jedes Captcha youse wenn Sie die dynamische benötigen, einschließlich:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
      async defer> 
    </script> 

    <div class="g-recaptcha"></div> 

    <script> 
     var onloadCallback = function() { 
      //remove old 
      $('.g-recaptcha').html(''); 

      $('.g-recaptcha').each(function (i, captcha) { 
       grecaptcha.render(captcha, { 
        'sitekey' : 'your key' 
       }); 
      }); 
     }; 
    </script> 

Aber es ist langsam. Sie können auch alle Recaptchas auf der Seite initial definieren: https://developers.google.com/recaptcha/docs/display

Answer 6

Das gleiche Problem kann aufgrund der langsamen Internetverbindung verursacht werden.