Checking for a ReCAPTCHA entry on the client

ReCAPTCHA necessarily posts back to the server for validation of the entered text. However, if no text has been entered at all, then there's nothing to post back for. In ASP.NET web forms, we can use a CustomValidator control to check whether there's anything to submit, and if not, avoid the round trip to the server.

This example uses a ValidationSummary control (not shown.)

<asp:CustomValidator runat="server" ID="valCaptchaEntered" 
  ErrorMessage="Please complete the verification code (captcha)" 
  Display="None" ClientValidationFunction="validateCaptchaEntered">
</asp:CustomValidator> 
<div id="recaptcha_div"> 
 <recaptcha:RecaptchaControl ID="capLogin" runat="server" 
 PublicKey="[key]" PrivateKey="[key]" 
 Theme="white" CssClass="captcha" OverrideSecureMode="true" /> 
</div> 

Assuming you're using jQuery, the client side validation function is just a couple of lines, and looks like this:

// Make sure the user entered something into the captcha, so we don't round-trip to the 
// server if they've left it empty. 
function validateCaptchaEntered(source, arguments) {
    var value = $.trim($("#recaptcha_response_field").val());
    arguments.IsValid = (value != "");
}