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

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

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

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

вот мой код.

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

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

Error: ReCAPTCHA placeholder element must be empty

javascript jquery recaptcha laravel-4.2
person Nirali Joshi    schedule 04.05.2016    source источник
comment
Работает ли это: <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> Если нет, то включаете ли вы сценарий дважды на всякий случай?   -  person HC_    schedule 10.05.2016

Ответы (7)


arrow_upward
121
arrow_downward

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

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

person Syed Waqas Bukhary    schedule 03.09.2016
comment
У меня такая же проблема... и когда я вижу консоль Google Chrome, я вижу, что api.js загружается один раз, а recaptcha__es.js загружается три раза. В чем здесь может быть проблема? - person jstuardo; 02.05.2017
comment
Как предотвратить повторную загрузку скрипта? Поскольку он загружается по умолчанию, когда '‹%= recaptcha_tags %›' отображается в Ruby. - person Farhad; 11.09.2017
comment
в моем случае я загрузил только один раз, но у меня проблема - person Beingnin; 22.10.2018
comment
@NithinChandran Я так не думаю. Подтвердите это в инструментах разработчика Google Chrome. Возможно, он загружен дважды из другого скрипта. - person Syed Waqas Bukhary; 22.10.2018

arrow_upward
7
arrow_downward

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

выбрал

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

or

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

arrow_upward
3
arrow_downward

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

person Gary D    schedule 08.05.2017

arrow_upward
3
arrow_downward

Я получил эту ошибку, когда пытался отобразить reCaptcha на непустом элементе.

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

Элемент-заполнитель reCaptcha должен быть пустым

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

arrow_upward
1
arrow_downward 

WARNING: Tried to load angular more than once.

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

person MaazKhan47    schedule 22.06.2017

arrow_upward
0
arrow_downward

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

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

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

person Дима Лобурец    schedule 26.07.2017

arrow_upward
0
arrow_downward

Это сработало для меня.

<script>
    var onloadCallback = function() {
        if (captcha.length ) {
            grecaptcha.render(captcha, {
                'sitekey' : 'your key'
            });
        }
    };
</script>
person Siddhant    schedule 11.05.2020