Невидимый reCaptcha iframe не отображается, форма застряла - PullRequest
Новая
       127

Невидимый reCaptcha iframe не отображается, форма застряла

1 голос
/ 29 апреля 2020

Я загружаю два скрипта на своих сайтах: 

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

Где my_site.js выглядит так: 

... many other functions, not nested

function captachaCallback() {
    console.log("Captcha");
}

... other functions

Тогда в своей форме я использую: 

<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

Всякий раз, когда я нажимаю кнопку, появляется белый полупрозрачный наложенный пустой div, но ничего не происходит (консольное сообщение не появляется), и форма застревает.

click picture

Я пользуюсь последней Chrome.

Заранее спасибо

1 Ответ

0 голосов
/ 06 мая 2020

Вы не обрабатываете капчу.

Кнопка отправки пытается проверить ответ капчи, как только пользователь завершит капчу, отправив обратный вызов функции, указанной в data-callback. Поскольку вы не создали компонент, он застрял в al oop.

  1. Кнопка отправки не может быть тем же тегом, в котором вы загружаете CAPTCHA. Вам необходимо отобразить капчу в пустом теге.

Вместо: 

    <button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>

Отображать как: 

    <div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
Оберните это внутри формы. Он у вас уже есть, поэтому просто измените его.

Поскольку вы указываете, какую функцию следует запускать после завершения проверки, вам не нужно беспокоиться о кнопке отправки.

Структура должна выглядеть примерно так: 

    <form action="?" method="POST">
      /// The other elements in your form
      /// ...
      <div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
      <br/>
      <input id="btnSubmit" type="submit" value="Submit">
    </form>

Также обязательно посмотрите документацию;)

https://developers.google.com/recaptcha/docs/display

...