Две и более recaptcha на странице, как реализовать?

Question

[Антон Вебсайтовский]

Всем привет, пытаюсь реализовать 2 или более рекапчь формы на странице.

Сделал я вот такой вариант.

Форма #1
<form method="post" action="#">
	<input type="email">
	<div id="recaptcha-1"></div>
	<button type="submit">Отправить</button>
</form>
 
Форма #2
<form method="post" action="#">
	<input type="email">
	<div id="recaptcha-2"></div>
	<button type="submit">Отправить</button>
</form>

<code lang="html">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit">
<script>
var onloadCallback = function(){
	var key = 'КЛЮЧ_САЙТА';
	grecaptcha.render('recaptcha-1', {
		'sitekey': key
	});
	grecaptcha.render('recaptcha-2', {
		'sitekey': key
	});
};
</script>
</code>

Капча не работает, я так понимаю надо что-то в моей влаидации для формы править.

Как быть теперь с js который для формы валидация, у меня там так.

<script>
    $(function() {

      $('#kbmform').submit(function(event) {
        var alerts = "";
        var errors = false;

        var captcha = grecaptcha.getResponse();

        if (!captcha.length) {
          alerts += "\n Поставьте галочку я не робот.";
          errors = true;
        }

        //подсвечиваем важное поле для заполнения у которых класс valpro2
        $(".valpro2").each(function() {
          if (!$(this).val()) {
            $(this).addClass('validform');
            errors = true;
          } else {
            $(this).removeClass('validform');
          }
        });

        if (errors) {
          alert('Пожалуйста, заполните все обязательные поля.' + alerts);
        }

        if ((errors) && (captcha.length)) {
          formData.append('g-recaptcha-response', captcha);
        }

        if (!errors) {
          var data = $('#kbmform').serialize();
          $.ajax({
            url: 'kbmsend.php',
            type: 'POST',
            data: data,
            success: function(res) {
              if (res == 1) {
                alert('Письмо отправлено, в ближайшее время Вам перезвонит менеджер.');
                document.getElementById('kbmform').reset() //отчистка полей в форме после отправки
              } else {
                alert('Ошибка отправки, попробуйте повторить отправку позднее.');
              }
            },
            error: function() {
              alert('Ошибка!');
            }
          });
        }

        return false;
      });

    });
  </script>

Answer 1

[Антон Вебсайтовский]

Решение:

<script>
    var recaptcha1;
    var recaptcha2;

    function recaptchaCallback() {
      recaptcha1 = grecaptcha.render('recaptcha-1', {
        'sitekey': '00000000000000000000000000000'
      });

      recaptcha2 = grecaptcha.render('recaptcha-2', {
        'sitekey': '00000000000000000000000000000'
      });
    }
  </script>

Далее в владации
var captcha = grecaptcha.getResponse(recaptcha2);

И тема еще по теме: Как установить более одной reCaptcha на странице?

Comments

[Vkurse]

Норм решение, работают 2 каптчи!