Я использую HAML, Semantic UI и jQuery для генерации моего статического сайта, и у меня есть набор форм на странице, которые используют reCAPTCHA v2.Мой веб-разработчик исчерпал время на проекте, поэтому я взял слабину, но знаю только немного Javascript / Semantic / jQuery.
_header частичные выходы: <script src="https://www.google.com/recaptcha/api.js"></script>
myмакет возвращает данные формы:
<form action='https://liveformhq.com/form/<form uuid>' class='ui large form' id='formGeneral' method='POST'>
<snip>
<label>Message *</label>
<textarea name='message' placeholder='Say hello'></textarea>
</div>
<div class='field'>
<div class='g-recaptcha' data-callback='reCaptcha_general' data-sitekey='<my site key>'></div>
<input class='hiddenRecaptcha' id='gen_hiddenRecaptcha' name='gen_hiddenRecaptcha' type='hidden'>
<button class='ui primary large button' type='submit'>Send</button>
<a class='item' href='#top' rel='scrolltoanchor'>⬆</a>
</div>
<div class='ui error message'></div>
</form>
_footer частично возвращает jQuery, который я комментирую при прохождении:
Я не знаю, почему он использовал $('form').form({
вместо $('form').validate({
- Это более свежая версия jQuery?Однако он поднимает «пустое» поле reCAPTCHA.
// form validation
//
$('form').form({
on: 'blur',
fields: {
<snip>
message: {
identifier: 'message',
rules: [{
type: 'empty',
prompt: 'Please enter your message'
}]
},
gen_hiddenRecaptcha: {
identifier: 'gen_hiddenRecaptcha',
rules: [{
gen_hiddenRecaptcha: { required: true },
type: 'empty',
prompt: 'Please check the reCAPTCHA check box'
}]
},
}
});
Похоже, что получен ответ (я могу предупредить и увидеть ответ полученным), и это правильно влияет на семантическое предупреждение, которое исчезает, когдаполе больше не пустое.
var reCaptcha_general = function(response) {
$("#gen_hiddenRecaptcha").val(response);
};
И поэтому ниже, я думаю, это проблема.Когда все поля заполнены, кнопка отправки не работает.Возможно, я ранее перепутал два разных подхода и попытался решить проблему с обоими одновременно.
Когда нажата кнопка отправки, вызывается эта функция, но ничего не происходит.
$('#formGeneral').submit(function(event) {
if (!grecaptcha.getResponse()) {
event.preventDefault(); //prevent form submit
grecaptcha.execute();
}
});
ОБНОВЛЕНИЕ: Я только что отредактировал это на месте, так как у меня еще не было никаких ответов.
ОБНОВЛЕНИЕ2: Чтобы не искажать комментарии ниже (и иметь в виду, в это время написания нет ответов)на вопросы, представленные ниже), я обновил код и хотел поделиться им на тот случай, если кто-то запутается таким же образом.
Пересмотр Документов Google после появления предупреждения о других вопросахчтобы убедиться, что вы проверяете токен ответа отдельно , идентификатор элемента формы переименовывается, чтобы было яснее, что он несет полезную нагрузку токена ответа:
<div class="g-recaptcha" data-callback="reCaptcha_general" data-sitekey="<site-key>">
<input class="hiddenRecaptcha" id="gen_recaptchaResponseToken" name="gen_recaptchaResponseToken" type="hidden">
и в нижнем колонтитуле, и этот javascriptвыводить предупреждения, если окно сообщения или reCAPTCHA пусто:
$('form').form({
on: 'blur',
fields: {
message: {
identifier: 'message',
rules: [{
type: 'empty',
prompt: 'Please enter your message'
}]
},
gen_recaptchaResponseToken: {
identifier: 'gen_recaptchaResponseToken',
rules: [{
gen_recaptchaResponseToken: { required: true },
type: 'empty',
prompt: 'Please check the reCAPTCHA check box'
}]
},
}
});
Таким образом, я обновил функцию обратного вызова с помощью новой HTML-формы element ID:
var reCaptcha_general = function(response) {
$("#gen_recaptchaResponseToken").val(response);
};
и наконец полностью удалил вызов grecaptcha.getResponse () согласно предложению:
$('#formGeneral').submit(function(event) {
});
и форма правильно функционирует .Я думаю, что причина этого в том, что у моей службы проверки формы (очень хорошая liveform ) есть секрет, который я получил, когда зарегистрировался в службе reCAPTCHA через Google.Я пока не получил от них подтверждения того, что они технически делают на бэкенде, но, поскольку действие формы отправляет POST на URL liveformhq.com, по крайней мере, я ожидаю, что они будут использовать API-интерфейс siteverify от Google для подтверждения ответа reCAPTCHAтокен действителен
Вопросы:
Правильно ли я думаю, что с учетом вышесказанного я использую проверку формы jQuery, чтобы предотвратить отправку формы путем анализа пустотыответа от reCAPTCHA, вместо того, чтобы полагаться на grecaptcha.getResponse()
?
Если да, нужен ли мне звонок grecaptcha.getResponse()
?
Хотя, правильно ли я думаю, что более безопасно полагаться на grecaptcha.getResponse()
и просто выполнить обработку формы jQuery для этого элемента формы required: true
, просто чтобы получить предупреждение для пользователя?