Как проверить невидимую Recaptcha V2 на JS?

Question

Как проверить невидимую Recaptcha V2 на JS?

Рейтинг: 0Ответов: 1Опубликовано: 07.06.2023

Проверяю recaptcha v2 на стороне js с помощью следующего кода:

grecaptcha.getResponse().length == 0

Но с невидимой этот код не работает. Каким образом можно проверить невидимую recaptcha перед отправкой формы?

javascript jquery ajax recaptcha

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Если я правильно понял задачу то ответ находится в документации в последнем скрипте на странице. Проверка делается через grecaptcha.execute(). Код проверил на своем домене, зарегестрировав v2 invisible перед отправкой формы если она заполнена происходит валидация. Понятное дело что скрипт модифицируется под конкретную задачу, способом навешивания обработчика и самой функцией validate

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>

Как проверить невидимую Recaptcha V2 на JS?

Ответы