title: Implementing Google reCaptcha with custom validation script
body: <p>I spent a day incorporating the google recaptcha into my existing form but the challenge that Im having now is that I would like to include the recaptcha validation within my custom validation script for the form fields.</p>
  
  <p>The way that the validation scripts works is that the submit handler runs a function after the validation is successful. The success action will process email script.</p>
  
  <p>I want to validate the captcha before the email script is sent. How do I do this with my current setup? Im using ajax in custom.js to process this. Take a look at the <strong>submithandler</strong>. I would appreciate any help with this.  </p>
  
  <p>There are 3 files:</p>
  
  <ul>
  <li>the form html file</li>
  <li>custom.js</li>
  <li>verify.php</li>
  </ul>
  
  <p><strong>Form HTML</strong></p>
  
  <pre><code>&lt;form id="appointment" name="appointment" method="post" action=""&gt;
  
      &lt;script type="text/javascript"&gt;
       var RecaptchaOptions = {
          theme : 'clean',
          custom_theme_widget: 'recaptcha_widget'
       };
      &lt;/script&gt;
  
      &lt;fieldset&gt;
  
          &lt;div class="span11 fix-margin"&gt;
              &lt;div class="span5 fix-margin"&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;input id="name" name="name" type="text" class="span4 required"&gt;
              &lt;/div&gt;
  
              &lt;div class="span5"&gt;
                &lt;label for="patient"&gt;Are you a current patient?&lt;/label&gt;
                &lt;div&gt;
                  &lt;label class="radio inline" for="radios-0"&gt;
                    &lt;input type="radio" name="patient" id="patient-1" value="Yes"&gt;Yes
                  &lt;/label&gt;
                  &lt;label class="radio inline" for="radios-1"&gt;
                    &lt;input type="radio" name="patient" id="patient-0" value="No"&gt;No
                  &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="span11 fix-margin"&gt;
  
              &lt;div class="span5 fix-margin"&gt;
                  &lt;label for="address"&gt;Adress&lt;/label&gt;
                  &lt;input id="address" name="address" type="text" class="span4"&gt;
              &lt;/div&gt;
              &lt;div class="span5"&gt;
                  &lt;label for="city"&gt;City&lt;/label&gt;
                  &lt;input id="city" name="city" type="text" class="span3"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="span11 fix-margin"&gt;
  
              &lt;div class="span5 fix-margin"&gt;
                  &lt;label for="state"&gt;State&lt;/label&gt;
                  &lt;input id="state" name="state" type="text" class="span3"&gt;
              &lt;/div&gt;
              &lt;div class="span5"&gt;
                  &lt;label for="zip"&gt;Zip/Postal&lt;/label&gt;
                  &lt;input id="zip" name="zip" type="text" class="span1"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="span11 fix-margin"&gt;
  
              &lt;div class="span5 fix-margin"&gt;
                  &lt;label for="email"&gt;Email&lt;/label&gt;
                  &lt;input id="email" name="email" type="text" class="span3 required"&gt;
              &lt;/div&gt;
  
              &lt;div class="span5"&gt;
                  &lt;label for="phone"&gt;Phone&lt;/label&gt;
                  &lt;input id="phone" name="phone" type="text" class="span3 required"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;  
  
          &lt;div class="span11 fix-margin checkboxes1"&gt;
  
              &lt;!-- Multiple Checkboxes (inline) --&gt;
              &lt;div class="control-group span11 fix-margin"&gt;
                &lt;label class="control-label" for="day"&gt;Preferred day(s) of the week for an appointment?&lt;/label&gt;
                &lt;div class="controls"&gt;
                  &lt;label class="checkbox inline" for="day-0"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-0" value="Any day"&gt;Any day
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="day-1"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-1" value="Monday"&gt;Monday
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="day-2"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-2" value="Tuesday"&gt;Tuesday
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="day-3"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-3" value="Wednesday"&gt;Wednesday
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="day-4"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-4" value="Thursday"&gt;Thursday
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="day-5"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-5" value="Friday"&gt;Friday
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="day-6"&gt;
                    &lt;input type="checkbox" name="day[]" id="day-6" value="Saturday"&gt;Saturday
                  &lt;/label&gt;
  
  
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="span11 fix-margin checkboxes2"&gt;
  
              &lt;!-- Multiple Checkboxes (inline) --&gt;
              &lt;div class="control-group span11 fix-margin"&gt;
                &lt;label class="control-label" for="time"&gt;Preferred time(s) for an appointment?&lt;/label&gt;
                &lt;div class="controls"&gt;
                  &lt;label class="checkbox inline" for="time-0"&gt;
                    &lt;input type="checkbox" name="time[]" id="time-0" value="Any time"&gt;Any Time
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="time-1"&gt;
                    &lt;input type="checkbox" name="time[]" id="time-1" value="Morning"&gt;Morning
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="time-2"&gt;
                    &lt;input type="checkbox" name="time[]" id="time-2" value="Noon"&gt;Noon
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="time-3"&gt;
                    &lt;input type="checkbox" name="time[]" id="time-3" value="Afternoon"&gt;Afternoon
                  &lt;/label&gt;
  
                  &lt;label class="checkbox inline" for="time-4"&gt;
                    &lt;input type="checkbox" name="time[]" id="time-4" value="Evening"&gt;Evening
                  &lt;/label&gt;
  
  
                &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="span11 fix-margin"&gt;
              &lt;!-- Textarea --&gt;
              &lt;label for="description"&gt;Please describe the nature of your appointment (e.g., consultation, check-up, etc.):&lt;/label&gt;
              &lt;textarea id="description" name="description" class="span7" rows="5"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
  
           &lt;script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=public_key_here"&gt;&lt;/script&gt;
  
  &lt;noscript&gt;
  &lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=public_key_here" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;
  &lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
  &lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge"/&gt;
  &lt;/noscript&gt;
          &lt;br&gt;
  
          &lt;div class="span11 fix-margin"&gt;
              &lt;p&gt;Please Note: Messages sent using this form are not considered private.&lt;/p&gt;
              &lt;p&gt;Please contact Forum Veterinary Clinic by telephone if sending highly confidential or private information.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="okmessage" class="span4 fix-margin"&gt;
              &lt;p&gt;Your message has been sent. Thank you!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;button class="btn btn-theme btn-large" type="submit" id="submit-appoinment"&gt;Send Request&lt;/button&gt;
  
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Custom.js</strong></p>
  
  <pre><code>$.validator.addMethod("verify", function(value, element, params) {
    return this.optional(element) || value == params[0] + params[1];
  }, jQuery.validator.format("Please enter the correct value for 3 + 1"));
  
  $("#appointment").validate({
  
      rules: {
          name: {
              minlength:3,
          },
          verify:{
              verify:[3, 1]
          },
          email:{
              email: true
          },
          phone:{
              phoneUS: true
          },
          day: { 
                  required: true, 
                  minlength: 1 
          },
          time: { 
                  required: true, 
                  minlength: 1 
          },
          recaptcha_response_field:{
              minlength:3
          } 
  
      },
      messages: {
          day: "Please select at least one day.",
          time: "Please select the prefered time for the appointment.",
          email: "Please enter a correct email address."
      },
  
      errorPlacement: function(error, element) {
          error.insertAfter(element);
          if ($(".checkboxes1").has(element).size() &gt; 0) {
              error.insertAfter($(".checkboxes1"));
          } 
          if ($(".checkboxes2").has(element).size() &gt; 0) {
              error.insertAfter($(".checkboxes2"));
          }
  
      },
  
      submitHandler: function(form) {
  
      event.preventDefault();
      var Challenge = Recaptcha.get_challenge(); // get the challenge
      var Response = Recaptcha.get_response();   // get the user response 
  
      $.ajax({
          type: 'POST',
          data: $(form).serialize(),
          url: "/lib/send_email.php",
  
          success: function() {
  
              form.reset();
  
              $('#submit-appoinment').hide();
              $('#okmessage').show().fadeOut(7000, function(){
                  $('#submit-appoinment').show();
              });
  
          }
  
      });
  
          //form.submit();
          return false;
      }
  });
  </code></pre>
  
  <p><strong>Verify.php</strong></p>
  
  <pre><code>require_once('recaptchalib.php');
  $privatekey = "private_key_here";
  $resp = recaptcha_check_answer ($privatekey,
                              $_SERVER["REMOTE_ADDR"],
                              $_POST["recaptcha_challenge_field"],
                              $_POST["recaptcha_response_field"]);
  
  if (!$resp-&gt;is_valid) {
  // What happens when the CAPTCHA was entered incorrectly
  die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
       "(reCAPTCHA said: " . $resp-&gt;error . ")");
  } else {
   // What happens when the CAPTCHA was entered correctly 
  }
  </code></pre>