How to Validate Google Recaptcha V2 Using JavaScript/Jquery

How to validate google recaptcha on client side?

I share my code solution. But the proxy.php and other details with the full explanation (incl. backend part) you might find here.

Recaptcha with data-callback parameter

<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post">
<div class="g-recaptcha" data-sitekey="[site_key]" data-callback="onReturnCallback" data-theme="light"></div>
<input value="submit" type="submit" />
</form>

JS validation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var onReturnCallback = function(response) { 
    //alert('g-recaptcha-response: ' + grecaptcha.getResponse()); 
    var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';  
    $.ajax({ 'url' : url, 
               dataType: 'json',
               data: { response: response},
               success: function( data  ) {                     
                var res = data.success.toString();
                        alert( "User verified: " + res);                    
                if (res ==  'true') { 
                       document.getElementById('g-recaptcha').innerHTML = 'THE CAPTCHA WAS SUCCESSFULLY SOLVED'; 
                                } 
                           } // end of success: 
         }); // end of $.ajax 
}; // end of onReturnCallback 
</script>

Note!

The backend part, proxy.php, is necessary because of security issue.

Google recaptcha validation with Jquery

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

Validating submit of form with Google reCAPTCHA

You need to trigger your if statement in an event. If you're using jQuery you can do this very easily:

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

See working example here: JSFiddle

The problem with doing this in JavaScript at all is that the user can easily fake the result if they want to. If you really want to be checking if the user is a robot or not, you should still be comparing the result submitted by the user (via POST) on the server side using your reCAPTCHA secret key.

Google reCAPTCHA with jQuery validation

You need to trigger your if statement in an event. It's very easy:

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

See working example here: JSFiddle

How to create google reCAPTCHA v2.0 validation using jQuery Validation Plugin and PHP

@NK If you apply your php validation message On top of the form tag. it will works.

like this

 <!--Session validation message-->
 <?php if(isset($_SESSION["ReC"]) && !empty($_SESSION["ReC"])){
    echo $_SESSION["ReC"];
    unset($_SESSION["ReC"]); }
?>

<form action="signup-process.php" method="post" id="signupForm">
  <input class="form-control" type="text" name="name" id="name">
  <div class="g-recaptcha" data-sitekey="my-key"></div>
  <input class="btn btn-block" type="submit" value="Sign Up" name="submitted">
</form>