Ошибка: элемент-заполнитель ReCAPTCHA должен быть пустым

Я использую recaptcha с моим приложением laravel.

Я просто хочу проверить ответ recaptcha на отправке формы с помощью jquery и остановить пользователя по предупреждению, чтобы проголосовать за проверку captcha.

но я не мог прекратить подачу формы, даже если captcha не заполнен.

вот мой код.

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

Я получаю эту ошибку в консоли браузера, и форма получает submit.

Error: ReCAPTCHA placeholder element must be empty

Ответ 1

Вы дважды загружаете библиотеку google recaptcha.

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

Ответ 2

Я использую ContactForm7 для Wordpress, который имеет встроенную интеграцию с Recaptcha. У меня также есть плагин BWP Recaptcha, который использует те же библиотеки recaptcha. Я ошибочно добавил ключи активации для обоих, что заставляло js-библиотеку загружаться дважды. Как только я удалил ключи из плагина CF7, ошибка исчезла.

Ответ 3

Вы загружаете библиотеку 2 раза

выбрали

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

или

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

Ответ 4

WARNING: Tried to load angular more than once.

В AngularJs эта ошибка вызывает такие проблемы. Вы также можете проверить jquery.

Ответ 5

Просто используйте это для каждой записи на странице, если вам нужна динамика, включая:

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

Но он медленный. Вы также можете определить все recaptchas на странице изначально: https://developers.google.com/recaptcha/docs/display

Ответ 6

Такая же проблема может быть вызвана медленным подключением к Интернету.