2

我正在使用 HAML、Semantic UI 和 jQuery 来生成我的静态网站，并在使用 reCAPTCHA v2 的页面上有一组表单。我的 web 实现者在项目上没时间了，所以我弥补了这一点，但只知道一点 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 partial 产生了我在我们逐步完成时评论的 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();
      }
  });

更新：我刚刚编辑了这个，因为我还没有任何答案。

UPDATE2：为了不歪曲下面的评论（并记住在写这篇文章的时候没有提交以下问题的答案），我更新了代码并想分享这个，以防其他人以同样的方式纠结.

在看到其他确保您单独验证响应令牌的警告后修改谷歌文档，表单元素 id 被重命名以更清楚地表明它携带响应令牌有效负载：

<div class="g-recaptcha" data-callback="reCaptcha_general" data-sitekey="<site-key>">
<input class="hiddenRecaptcha" id="gen_recaptchaResponseToken" name="gen_recaptchaResponseToken" type="hidden">

并在页脚中，如果消息框或 reCAPTCHA 为空，则此 javascript 将输出警告：

$('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 表单元素 ID 更新了回调函数：

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

最后按照建议完全删除了 grecaptcha.getResponse() 调用：

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

并且表单功能正常。我认为这样做的原因是因为我的表单验证服务（非常出色的liveform）拥有我在谷歌注册 reCAPTCHA 服务时得到的秘密。我还没有收到他们的回复，确认他们在后端技术上做了什么，但是随着表单操作发布到 liveformhq.com URL，至少，我希望他们会点击谷歌的 siteverify API 来确认 reCAPTCHA 响应令牌有效。

问题：

  1. 我是否正确地认为，通过上述方式，我正在使用 jQuery 表单验证来防止通过解析来自 reCAPTCHA 的响应的空性来提交表单，而不是依赖于grecaptcha.getResponse()？

  2. 如果是这样，我什至需要grecaptcha.getResponse()打电话吗？

  3. 虽然，我是否正确地认为依赖grecaptcha.getResponse()并只为该表单元素进行 jQuery 表单处理required: true只是为了获得用户的警告提示更安全？

4

0 回答 0