Как сделать валидацию нескольких рекапч для ajax форм?

Question

[AbsolvoTe]

Здравствуйте!
Подключаю Api:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Создаю функцию:

var callbackCaptcha;
var questionCaptcha;

function onloadCallback() {
	callbackCaptcha = grecaptcha.render('callback_captcha', {
		'sitekey' : 'ключ'
	});

	questionCaptcha = grecaptcha.render('question_captcha', {
		'sitekey' : 'ключ'
	});
}

Вывожу:

<form>
  <div id="callback_captcha"></div>
  <p class="test-danger"></p>
</form>
<form>
  <div id="question_captcha"></div>
  <p class="test-danger"></p>
</form>

Отправляю ajax форму:

$("form").submit(function() { //Change
		var th = $(this);
		var captcha = grecaptcha.getResponse();
		if (!captcha.length) {
			$('.test-danger').text('*Вы не прошли проверку "Я не робот"');
		} else {
			$.ajax({
				type: "POST",
			url: uri+"/mail.php", //Change
			data: th.serialize()
		}).done(function() {
			th.find(".success").addClass("active");
			setTimeout(function() {
				// Done Functions
				th.find(".success").removeClass("active");
				th.trigger("reset");
				$.magnificPopup.close();
				$('.test-danger').text('');
			}, 3000);
		});
	}
	return false;
});

На итог отправляется только первая callback_captcha форма. Подскажите, пожалуйста, что я делаю не так?

Comments

[Максим Тимофеев]

а разве смысл рекапчи не в том, что бы использовать ее один раз и не издеваться над пользователем в каждой форме?

[AbsolvoTe]

Максим Тимофеев, две разные формы. Какой-то из них пользователь воспользуется, какой именно неизвестно. Получится одна с рекапчей, а другая нет)

[Максим Тимофеев]

AbsolvoTe, ее надо динамически вешать, на первую заполненную, она не должна знать какая она по счету

Answer 1

[grinat]

Судя по докам:
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
Поэтому так должно сработать:
grecaptcha.getResponse(callbackCaptcha)
grecaptcha.getResponse(questionCaptcha)

Ток все равно не думаю шо срабоает, валидации ведь по идее аснихронная. Поэтому либо
var verifyCallback = function(response) {
if(response){
$("form").submit(function() {
... и далее этот ад на juqery
}
};

callbackCaptcha = grecaptcha.render('callback_captcha', {
'sitekey' : 'ключ',
'callback': verifyCallback
});