jQuery.validate ajax проверка recaptcha

Для приготовления рецепта нам нужны:

• jquery
• jquery.validate
• ключи recaptha 1,0
• ровные руки

Я покажу, как интегрировать reCaptcha 1.0 со знаменитым плагином jQuery Validate. Я уверен, что у вас уже есть учетная запись reCaptcha, из нее Вам понадобится секретный и публичные ключи для сайта, чтобы смело работать с обменом данных.

Для чего нам нужно это? Для того чтобы в реальном времени проверять событие прохождения капчи или подобного рода ajax запросы с ответом. Проблема не частая, но я уверен, что кто-то сталкивался с ней.

1. Подключаем reCaptcha AJAX js:

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

2. Разместите этот див, чтобы вывести форму рекапчи

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

Javascript (или Coffeescript)

// Отображает форму recaptcha в элементе с идентификатором "captcha"
Recaptcha.create("your_public_key", "captcha", {
  theme: "clean",
  callback: Recaptcha.focus_response_field
});

// Добавляем новый метод валидации
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;
}), "");

// Валидация
$("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
  # 

  # Отображаем форму
  Recaptcha.create "your_public_key", "captcha",
    theme: "clean"
    callback: Recaptcha.focus_response_field

  # Добавляем новый метод валидации
  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
  ), ""

  # Валидация
  $("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: "Ва."

    onkeyup: false
    onfocusout: false
    onclick: false

PHP

1. Скачайте recaptcha php библиотеку и распакуйте в какую-нибудь папку, например libs или используя композер, скачайте в vendor и подключите автолоад:
2. Cоздайте файл вызова, например checkCaptcha.php, этот скрипт будет валидировать капчу:

<?php
// Подключение библиотеки
require_once __DIR__ . "/libs/recaptcha-php/recaptchalib.php";

$privatekey = "your_private_key";

// Смотрим пост запросы
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

// Если все ок, то вернем тру
if ($resp->is_valid) {
  echo "true";
} else {
  echo "false";
}

Дополнительно: CSS / LESS

Вы можете столкнуться с некоторыми проблемами, которые вы решите с помощью этого CSS:

/*
 * reCaptcha перезапись классов
 */
// Убираем нижний бордер имейджа
.recaptchatable #recaptcha_image{
  overflow:hidden;
}

// Удаляем ненужную пустоту под фреймом
body > iframe[src='about:blank'] {display:none !important;}
header iframe,
section iframe,
footer iframe,
div iframe { display:inline; }

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне