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

Question

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

<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, но ничего не происходит (консольное сообщение не появляется), и форма застревает.

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

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

Answer 1

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

Кнопка отправки пытается проверить ответ капчи, как только пользователь завершит капчу, отправив обратный вызов функции, указанной в 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