Google recaptcha validation with Jquery

Question

I am interested to hide resultcaptcha message as soon as the user ticks and verifies the google recaptcha. Only the first part (v.length== 0) works. The else if doesn't work. you can check the form here: https://csandreas1.herokuapp.com

if(grecaptcha.getResponse() == 0) // this works
    {
        $('#resultcaptcha').show();
        $('#resultcaptcha').html('<i class="fa fa-exclamation-circle w3-text-red fa-3x" aria-hidden="true"></i> <span class="w3-text-white w3-bold" style="font-size:16px"> Please verify that you are a human</span>');
    }
    else if(grecaptcha.getResponse() == 1)//this doesn't work
    {
        $('#resultcaptcha').hide();
        $('#resultcaptcha').html('');
    }

    else{//submit the form}

Answer 1

The above code is inside the form submit event handler which will trigger only when "submit" (SEND) button is clicked.

To hide the error message as soon as the captcha is verified, you will need to use the data-callback on the captcha element ( class="g-recaptcha" ), which as the name suggests provides a callback to be executed the moment captcha is verified successfully. Here's the documentation link .

Here's what the code should look like. (I couldn't verify the code with data-callback attribute, but it did worked with grecaptcha.render() method)

<script>
     function captcha_callback(response) {
        if (response.length > 1) {
            $('#resultcaptcha').html('');
        }
    }
</script>

<div class="g-recaptcha" data-sitekey="site_key" data-callback="captcha_callback"><div>

Also, if you want to reset the captcha again, say clearing the form after it is successfully submitted, you can use: (See Documentation )

grecaptcha.reset()