Форма jQuery не будет отправлена ​​с reCAPTCHA 2

Question

Я использую HAML, Semantic UI и jQuery для генерации моего статического сайта, и у меня есть набор форм на странице, которые используют reCAPTCHA v2. У моего веб-разработчика не хватило времени на проект, поэтому я взял слабину, но знаю только немного Javascript / Semantic / jQuery.

_header частичные выходы:<script src="https://www.google.com/recaptcha/api.js"></script>

мой макет дает данные формы:

<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'>&#x2B06;</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-формы:

var reCaptcha_general = function(response) {
    $("#gen_recaptchaResponseToken").val(response);
};

и, наконец, полностью удалил вызов grecaptcha.getResponse() согласно предложению:

$('#formGeneral').submit(function(event) {
}); 

и форма функционирует правильно. Я думаю, что причина этого в том, что у моей службы проверки форм (очень хорошая живая форма) есть секрет, который я получил, когда зарегистрировался в службе reCAPTCHA через Google. Я пока не получил от них подтверждения того, что они технически делают на бэкенде, но, поскольку действие формы отправляет POST на URL liveformhq.com, по крайней мере, я ожидаю, что они будут использовать API-интерфейс siteverify от Google для подтверждения ответа reCAPTCHA токен действителен

Вопросы:

1. Правильно ли я считаю, что с учетом вышесказанного я использую проверку формы jQuery, чтобы предотвратить отправку формы, анализируя пустоту ответа от reCAPTCHA, а не полагаясь на grecaptcha.getResponse()?

2. Если да, то мне даже нужно grecaptcha.getResponse() вызов?

3. Хотя я прав, полагая, что на него более безопасно полагаться grecaptcha.getResponse() и просто сделать обработку формы JQuery для этого элемента формы required: true просто чтобы получить предупреждение для пользователя?