Errore: l'elemento segnaposto ReCAPTCHA deve essere vuoto

Question

Sto utilizzando recaptcha con la mia applicazione laravel.

Voglio solo controllare la risposta di recaptcha sul modulo di invio utilizzando jquery e interrompere l'utente con avviso che convalida il captcha.

ma, non ho potuto interrompere l'invio del modulo anche se captcha non è stato riempito.

ecco il mio codice.

$('#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> 

Ricevo questo errore nella console del browser e il modulo viene inviato.

Error: ReCAPTCHA placeholder element must be empty 

Answer 1

Si sta caricando la libreria google recaptcha due volte.

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

Answer 2

Sto usando ContactForm7 per Wordpress, che ha un built-in di integrazione con Recaptcha. Ho anche il plugin BWP Recaptcha, che usa le stesse librerie di ricaptcha. Ho erroneamente aggiunto le mie chiavi di attivazione a entrambi, il che causava il caricamento della libreria js due volte. Una volta rimosse le chiavi dal plugin CF7, l'errore è andato via.

Answer 3

WARNING: Tried to load angular more than once. 

In AngularJs questo errore causa tali problemi È possibile controllare jquery allo stesso modo.

Answer 4

si sta caricando la libreria 2 volte

scelto

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

o

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

Answer 5

Proprio Youse questo per ogni captcha alla pagina se avete bisogno di dinamica tra cui:

<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> 

Ma è lento. È inoltre possibile definire tutti i ricaptchas all'inizio della pagina: https://developers.google.com/recaptcha/docs/display

Answer 6

Lo stesso problema può essere causato a causa della connessione Internet lenta.