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)

Solution 1

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.

Solution 2

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.

Comments

[posfan12]

What do the three stars represent? Does the DIV require that specific class name?

[Shahar Shokrani]

It's V2: developers.google.com/recaptcha/docs/display. the *** are the site key, and yes the div structure is required.