check if google recaptcha is checked or has been filled

Question

im using google recaptcha

<label for="template-contactform-botcheck">Botcheck</label>
<div id="recaptcha_sme"></div>

and I want to verify if its checked or not, has been filled or not and the way im doing it is through this code (refer below)

if ($("#recaptcha_sme #recaptcha-anchor").hasClass("recaptcha-checkbox-checked")) {
    alert("the captcha has been filled");
} else {
    alert("Please fill the captcha!");
}

and I don't intend to go trough server side validation (google recaptcha API checking), I just want to be notified (using alert prompt) if the google recaptcha is checked or filled. Any ideas, clues, suggestions, recommendations to make it?

below is my complete form submit script code (submit function in jquery).

$("#sme_application_dialog form").submit(function(e){
    if ($(this).find("#recaptcha_sme #recaptcha-anchor").hasClass("recaptcha-checkbox-checked")) {
        alert("the captcha has been filled");
    } else {
        alert("Please fill the captcha!");
    }
    e.preventDefault();


});

as you can see from above reference, I'm just trying to check if the element that has an id of "recaptcha-anchor" has a class of "recaptcha-checkbox-checked" (as i can see from DOM structure using chrome dom explorer, that class has added unto the element that has an id of "recaptcha-anchor everytime the google recaptcha is checked or has been filled) so I thought that might work but sadly and unfortunately it doesn't work.

PS: assume that I have div that has an id of "sme_application_dialog_form" and inside it there is a from and inside that form, there is the google recaptcha and I have "$(document).ready". Assume that everything set and working (except for the validation where I'm checking the google recaptcha is checked or has been filled)

Documentation https://developers.google.com/recaptcha/docs/display#js_api - `grecaptcha.getResponse( opt_widget_id )` — mplungjan, Aug 26 '15 at 04:50
Have a look at this post: http://stackoverflow.com/questions/29612879/google-recaptcha-how-to-make-required/29613089#29613089 — colecmc, Aug 26 '15 at 05:49
Possible duplicate of [How to check in js that user has checked the checkbox in Google recaptcha?](http://stackoverflow.com/questions/28674946/how-to-check-in-js-that-user-has-checked-the-checkbox-in-google-recaptcha) — Huseyin Yagli, May 06 '17 at 09:42

score 4 · Answer 1 · edited Nov 04 '17 at 11:28

4

Add data-callback to your ReCapthca div:

<div class="g-recaptcha" data-sitekey="***" data-callback="recaptchaCallback"></div>

Add this function to your code.

var recaptchachecked;
function recaptchaCallback() {
    //If we managed to get into this function it means that the user checked the checkbox.
    recaptchachecked = true;
}

You may now can use the recaptchachecked on your OnSubmit() function.

edited Nov 04 '17 at 11:28

Daud khan

2,413
2
14
18

answered Sep 03 '17 at 12:51

Shahar Shokrani

7,598
9
48
91

What do the three stars represent? Does the DIV require that specific class name? – posfan12 Mar 11 '19 at 20:29
It's V2: https://developers.google.com/recaptcha/docs/display. the *** are the site key, and yes the div structure is required. – Shahar Shokrani Mar 11 '19 at 21:03

score 1 · Accepted Answer · edited May 25 '17 at 02:46

You can validate it on callback function by getting response value is null or not.

callback function

function submit(){ 
     var response = grecaptcha`.`getResponse();
     if(response != '0'){
           //captcha validated and got response code
           alert("the captcha has been filled");
     }else{
           //not validated or not clicked
           alert("Please fill the captcha!");
     }
}

It will work.

check if google recaptcha is checked or has been filled

2 Answers2