Google reCAPTCHA client-side validation

Released less than two months ago, Google reCAPTCHA is the pretty new on the block. And she’s clad in skimpy clothes. That’s another way of saying that the documentation is still scanty but the first imagery seemed more appropriate for an audience of solid developers like you.

The need for client-side validation arose when users of a WordPress plugin I developed were being confused by a server-side response being returned. Thing is, if one submitted a form before Google reCAPTCHA completed the validation process (say while the loading dialog was still showing), there’d be a problem. The best way to address this was to stop users from submitting till Google reCAPTCHA completed the validation. Finding a way to do client-side validation wasn’t straightforward but here’s what I used in my submit handler:

 if (!grecaptcha.getResponse()){
           console.log("Google reCAPTCHA not complete");//Display error here e.g. jQuery('#targetID').html("Please check the 'I'm not a robot' checkbox!")
            return;//End the processing
        }