Google ReCaptcha 2.0 Client Side and Server Side Validation in ASP.NET

Introduction

Google ReCaptcha 2.0 Client Side and Server Side Validation. I am not sure if it's a standard solution but it's definitely working without any fallback.

Background

Google has introduced Google NoCaptcha ReCaptcha which works effectively on Google servers to validate a human and bots. There is no provision as of now to customize the validation process on client side, yet some external agencies have validation add-ons to meet those requirements. But still I am sharing one more simple way to achieve this task.

Using the Code

Integrate Google ReCaptcha as per Google instructed on their website. I am going to show only validation.

For Client Side

Create a textbox with display hidden. Add two html data attributes, viz. data-expired-callback and data-callback:

<div class="g-recaptcha" data-expired-callback="expiredReCaptcha" 
data-callback="verifyReCaptcha" lang="en" 
data-sitekey="XXXX-XXXX-XXX"> </div> 

<asp:TextBox ID="tbIsCaptchaChecked" 
style="display:none" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfvtbIsCaptchaChecked" 
CssClass="tfrm-error" runat="server" ErrorMessage="Please verify captcha" 
Display="Dynamic" ControlToValidate="tbIsCaptchaChecked" 
ValidationGroup="register"></asp:RequiredFieldValidator>

<asp:Label ID="isCaptchaChecked" CssClass="tfrm-error" 
runat="server" Text="Please verify captcha"></asp:Label>

Now define your JavaScript function for those two attributes, i.e., expiredReCaptcha and verifyReCaptcha.

function expiredReCaptcha() 
{
    //This method will execute only if Google ReCaptcha expired
    $("#tbIsCaptchaChecked").val(""); // making hidden textbox empty 
}
 function verifyReCaptcha() 
 { 
    //This method will execute only if Google ReCaptcha successfully validated
    $("#tbIsCaptchaChecked").val("Success"); // making a dummy entry to hidden textbox
    $("#rfvtbIsCaptchaChecked").hide(); // hiding asp.Net requiredFieldValidator
    $("#isCaptchaChecked").hide(); // hiding custom error message
 }

For server side validation (ASP.NET: C#):

ReCaptcha reCaptcha = new ReCaptcha();
string response = Request["g-recaptcha-response"];
bool valid = reCaptcha.Validate(response);
    if (valid)
    { 

        //do your thing 

    }
    else 
    { 
        // validation failed , handle exception
        isCaptchaChecked.Visible = true;  // showing error message
    }

Hope this will help you. Feel free to share your comments.