javascript - grecaptcha - Error: el elemento de marcador de posición ReCAPTCHA debe estar vacío

recaptcha v3 example

Question

Estoy usando recaptcha con mi aplicación laravel.

Solo quiero verificar la respuesta de recaptcha en el formulario enviado usando jquery y detener al usuario mediante una alerta que valida validar el captcha.

pero no pude detener el envío del formulario incluso si el captcha no está completo.

aquí está mi código

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

Recibo este error en la consola del navegador y el formulario se envía.

Error: ReCAPTCHA placeholder element must be empty

Answer 1

El mismo problema puede deberse a una conexión a Internet lenta.

Answer 2

Está cargando la biblioteca de google recaptcha dos veces.

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

Answer 3

Estás cargando la biblioteca 2 veces

Elegir

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

Estoy usando ContactForm7 para Wordpress, que tiene una integración integrada con Recaptcha. También tengo el complemento BWP Recaptcha, que usa las mismas bibliotecas recaptcha. Había agregado erróneamente mis claves de activación a ambos, lo que causaba que la biblioteca js cargara dos veces. Una vez que eliminé las claves del complemento CF7, el error desapareció.

Answer 5

Obtuve este error cuando intenté renderizar ReCaptcha en un elemento no vacío

<div class="g-recaptcha"  data-sitekey="{{ env(''GOOGLE_RECAPTCHA_SITE_KEY'') }}">
      <div class="form-group">some element inside reCaptcha container</div>
</div>

El elemento de marcador de posición ReCaptcha debe estar vacío

<div class="g-recaptcha"  data-sitekey="{{ env(''GOOGLE_RECAPTCHA_SITE_KEY'') }}"></div>

Answer 6

Solo necesita esto para cada captcha en la página si necesita una dinámica que incluya:

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

Pero es lento. También puede definir todas las recaptchas en la página inicialmente: https://developers.google.com/recaptcha/docs/display

Answer 7

WARNING: Tried to load angular more than once.

En AngularJs este error causa tales problemas. También puedes verificar jquery.