Erreur: L'élément d'espace réservé ReCAPTCHA doit être vide.

Question

J'utilise recaptcha avec mon application laravel.

Je veux juste vérifier la réponse de recaptcha lors de l'envoi du formulaire à l'aide de jQuery et arrêter l'utilisateur par une alerte qui valide le captcha.

mais, je ne pouvais pas arrêter la soumission du formulaire même si captcha n'est pas rempli.

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

Je reçois cette erreur dans la console du navigateur et le formulaire est envoyé.

 Error: ReCAPTCHA placeholder element must be empty
 

Answer 1

Vous chargez la bibliothèque google recaptcha deux fois.

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

Answer 2

Vous chargez la bibliothèque 2 fois

choisi

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

ou

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

Answer 3

J'utilise ContactForm7 pour Wordpress, qui a une intégration intégrée à Recaptcha. J'ai aussi le plugin BWP Recaptcha, qui utilise les mêmes bibliothèques recaptcha. J'avais ajouté par erreur mes clés d'activation aux deux, ce qui entraînait le chargement de la bibliothèque js à deux reprises. Une fois que j'ai retiré les clés du plug-in CF7, l'erreur a disparu.

Answer 4

 WARNING: Tried to load angular more than once.
 

Dans AngularJs, cette erreur est la cause de tels problèmes. Vous pouvez également vérifier si jquery.

Answer 5

Si vous avez besoin de dynamique, y compris ceci:

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

Mais c'est lent. Vous pouvez également définir tous les recaptchas à la page initiale: https://developers.google.com/recaptcha/docs/display