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

Question

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

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

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?

Thanks!

UPDATE

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

1. HTML

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

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.

2. Javascript (the validate plugin)

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

Hope this helps!

Answer 1

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).

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

Example:

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) Add a hidden field in the same page

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

3) Render the 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>

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);

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

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();

Answer 2

The easiest way is to check this before submit :

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