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

Question

Я использую 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 

Answer 1

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

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

Answer 2

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

Answer 3

WARNING: Tried to load angular more than once. 

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

Answer 4

Вы загрузки библиотеки 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> 

Answer 5

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

<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

Answer 6

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