web-dev-qa-db-fra.com

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

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
javascriptjqueryrecaptchalaravel-4.2
48
Nirali Joshi

Vous chargez la bibliothèque google recaptcha deux fois.

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

120
Waqas Bukhary

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

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.

3
Gary D
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.

1
MaazKhan47

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

0
Дима Лобурец

J'ai eu cette erreur quand j'ai essayé de rendre reCaptcha sur un élément non vide

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

l'élément fictif reCaptcha doit être vide

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