jQuery Validate插件:如何才能使Google reCapture点击所需? [英] JQuery Validate plugin: how can I make Google reCapture click required?

问题描述

我有一张表格，上面有我从Google夺回的内容:

I have a form on which I have the following from Google's recapture:

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

在浏览器中加载表单页面后，将其替换为iframe，其中包含带有复选框我不是机器人"的复选框.提交表单后，服务器端会收到一个名称为g-recaptcha-response的值.

When the form page is loaded in the browser, it is replaced with an iframe, in which there is a checkbox lablled "I'm not a robot". When the form is submitted, the server-side receives a value under name: g-recaptcha-response.

如何设置验证插件以使人们需要单击我不是机器人"复选框?

How can I set the validate plugin to make it required for people to click the "I'm not a robot" checkbox?

谢谢！

更新

根据@ WpSEO.it提供的解决方案，这是我的情况:

Based on the solution @WpSEO.it provides, here is what I have for my case:

1. HTML

1. HTML

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

请注意，我无法隐藏或显示GrcResponse字段(而不是所选答案中的"grc-response"):通过CSS都不显示，因为如果这样做，我发现validate插件不会检查此字段. /p>

Note that I cannot make GrcResponse field (not "grc-response" as in the selected answer) hidden or display: none via CSS, because I find out that the validate plugin does not check this field if I did that.

1. Javascript(验证插件)

1. Javascript (the validate plugin)

$('#myform').validate({ 规则:{ GrcResponse:{ 必填:true } } });

$('#myform').validate({ rules: { GrcResponse: { required: true } } });

希望这会有所帮助！

推荐答案

我提出了一些技巧来解决此问题. Yoi可以将JS API回调与显式渲染一起使用. 在DOM上，您可以放置​​一个隐藏字段.加载ReCaptcha时，将其设置为具有"gc-response"值的"recaptcha-token". 在js回调中，您可以设置一个函数来读取该值并将其作为另一个元素(例如，隐藏按钮)的值.

i made a little trick to solve this problem. Yoi can use the JS API Callback with Explicit rendering. On the DOM you can put a hidden field. Wehn the ReCaptcha is loaded it set a "recaptcha-token" with the value of "gc-response". On the js callback you can set a function that read this value and put it as value of another element (the hidden button for example).

现在使用jquery或类似查询，您可以读取隐藏的按钮值，因此，您可以读取验证所需的gc响应;)

Now using jquery or similars you can read the hidden button value and so, you can read, the gc-response you need for validation ;)

示例:

1)包括具有显式模式的ReCaptcha API JS:

1) Include ReCaptcha API JS with Explicit Mode:

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

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

2) Add a hidden field in the same page

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

3)呈现验证码

<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代码将调用:

Using this code when you render the Recaptcha (step 3) ) you can manage the response and use it. When a user complete the Catpcha's verify the js code will call:

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

和响应"值将作为隐藏字段" grc-response "

and the "response" value will be put as value of the hidden field "grc-response"

现在，您可以从jQuery读取Recaptcha响应，或者类似的方式读取此隐藏字段的值. 在jQuery中，代码为:

Now you can read the Recaptcha response from jQuery or similar reading the value of this hidden field. In jQuery the code is:

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

这篇关于jQuery Validate插件:如何才能使Google reCapture点击所需?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！