JQuery 验证插件：如何使 Google 需要重新捕获点击？

Question

我有一张表格，上面有 Google 夺回的以下内容：

<div class="g-recaptcha" data-sitekey="6Lf-jgQTAAAAAGgYwYOOjGAQRFQKqTx_6FCcUYM_"></div>

在浏览器中加载表单页面时，它会被 iframe 替换，其中有一个标记为 "I'm not a robot" 的复选框。提交表单时，服务器端收到名称下的值：g-recaptcha-response.

我如何设置验证插件以使其成为人们单击 "I'm not a robot" 复选框所必需的？

谢谢！

更新

根据@WpSEO.it提供的解决方案，以下是我的情况：

HTML

        <div id="g-recaptcha" class="g-recaptcha"></div>
        <input type="text" name="GrcResponse" value="" style="margin-left: -9999px;height: 1px;">

请注意，我无法隐藏或显示 GrcResponse 字段（不是所选答案中的 "grc-response"）：none 通过 CSS，因为我发现验证插件确实如果我这样做了，就不要检查这个字段。

Javascript（验证插件）

$('#myform').validate({ 规则：{ GrcResponse: { 要求：真实 } } });

希望对您有所帮助！

Answer 1

我做了一个小技巧来解决这个问题。 Yoi 可以使用带有显式渲染的 JS API 回调。在 DOM 上，您可以放置一个隐藏字段。当 ReCaptcha 被加载时，它设置了一个 "recaptcha-token" 和 "gc-response" 的值。在 js 回调中，您可以设置一个函数来读取此值并将其作为另一个元素（例如隐藏按钮）的值。

现在使用 jquery 或类似的方法，您可以读取隐藏的按钮值，因此，您可以读取验证所需的 gc-response ;)

示例：

1) 在显式模式下包含 ReCaptcha API JS:

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

2) 在同一页面添加隐藏字段

<input type="hidden" name="grc-response" value="">

3) 渲染 ReCaptcha

<script type=’text/javascript’>
var captchaContainer = null;
var onloadCallback = function() {
     captchaContainer = grecaptcha.render(‘captcha_container’, {
         ‘sitekey’ :‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’,
         ‘callback’ : function(response) {
              $("input[name=grc-response]").val(response);
         }
     });
};
</script>

在呈现 Recaptcha（第 3 步）时使用此代码，您可以管理响应并使用它。当用户完成 Catpcha 的验证时，js 代码将调用：

$("input[name=grc-response]").val(response);

和 "response" 值将作为隐藏字段的值“grc-response”

现在您可以从 jQuery 读取 Recaptcha 响应或类似读取此隐藏字段的值。 jQuery 中的代码是：

var grecaptcha=$("input[name=grc-response]").val();

Answer 2

最简单的方法是在提交前检查一下：

  if (grecaptcha.getResponse() == "") {
                Alert("Please  click on Captcha")
                return;
            }

JQuery 验证插件：如何使 Google 需要重新捕获点击？

JQuery Validate plugin: how can I make Google reCapture click required?

jquery

jquery-validate

recaptcha