Adding reCaptcha validator to jQuery Validate with AJAX check and PHP

Here we will see how to integrate reCaptcha 1.0 with the famous jQuery Validate plugin. I assume that you already have a reCaptcha account (otherwise read the Step 1 from this post) because you will need a public and private key related to your site.

HTML

1. Load the reCaptcha AJAX js:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

2. Place this div where you want to display the reCaptcha form.

<div id="captcha"></div>

Javascript (or Coffeescript)

// Displays the recpatcha form in the element with id "captcha"
Recaptcha.create("your_public_key", "captcha", {
  theme: "clean",
  callback: Recaptcha.focus_response_field
});

// Add reCaptcha validator to form validation
jQuery.validator.addMethod("checkCaptcha", (function() {
  var isCaptchaValid;
  isCaptchaValid = false;
  $.ajax({
    url: "libs/checkCaptcha.php",
    type: "POST",
    async: false,
    data: {
      recaptcha_challenge_field: Recaptcha.get_challenge(),
      recaptcha_response_field: Recaptcha.get_response()
    },
    success: function(resp) {
      if (resp === "true") {
        isCaptchaValid = true;
      } else {
        Recaptcha.reload();
      }
    }
  });
  return isCaptchaValid;
}), "");

// Validation
$("form").validate({
  rules: {
    // your rules here...

    // Add a rule for the reCaptcha field
    recaptcha_response_field: {
      required: true,
      checkCaptcha: true
    }
  },
  messages: {
    recaptcha_response_field: {
      checkCaptcha: "Your Captcha response was incorrect. Please try again."
    }
  },
  onkeyup: false,
  onfocusout: false,
  onclick: false
});

  #
  # * Recaptcha
  # 

  # Displays the recpatcha form in the element with id "captcha"
  Recaptcha.create "your_public_key", "captcha",
    theme: "clean"
    callback: Recaptcha.focus_response_field

  # Add reCaptcha validator to form validation
  jQuery.validator.addMethod "checkCaptcha", (->
    isCaptchaValid = false
    $.ajax(
      url: "libs/checkCaptcha.php"
      type: "POST"
      async: false
      data:
        recaptcha_challenge_field: Recaptcha.get_challenge()
        recaptcha_response_field: Recaptcha.get_response()

      success: (resp) ->
        if resp is "true"
          isCaptchaValid = true
        else
          Recaptcha.reload()
    )
    return isCaptchaValid
  ), ""

  # Validation
  $("form").validate
    rules:
      // your rules here...

      // Add a rule for the reCaptcha field
      recaptcha_response_field:
        required: true
        checkCaptcha: true

    messages:
      recaptcha_response_field:
        checkCaptcha: "Your Captcha response was incorrect. Please try again."

    onkeyup: false
    onfocusout: false
    onclick: false 

PHP

1. Download the reCaptcha PHP library and extract the zip into a folder in your web project (in my example in /libs)
2. Create a file called checkCaptcha.php, this script will validates the captcha code:

// Include the reCaptcha library
require_once __DIR__ . "/libs/recaptcha-php/recaptchalib.php";

$privatekey = "your_private_key";

// reCaptcha looks for the POST to confirm
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

// If the entered code is correct it returns true (or false)
if ($resp->is_valid) {
  echo "true";
} else {
  echo "false";
}

Extra: CSS/LESS

You could experience some issues that you solve with this CSS:

/*
 * reCaptcha override fixes
 */
// Avoid to hide the bottom border of the image
.recaptchatable #recaptcha_image{
  overflow:hidden;
}

// Remove the blank space at the bottom of the page generated by the iframe
body > iframe[src='about:blank'] {display:none !important;}
header iframe,
section iframe,
footer iframe,
div iframe { display:inline; }