Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Background

I have a registration form that validates with AJAX using jQuery Validation Engine. The form was created using Theme My Login and contains reCaptcha which I implemented using WP-reCAPTCHA.

Just like the rest of the fields, I needed to validate reCaptcha using AJAX as well, that is, without refreshing the whole page. So far I managed to make it work when the Captcha didn't validate. But when it did validate, ie. the input was correct, the page refreshed but with an error message which says 'That reCAPTCHA response was incorrect'. Thus, the form was not saved.

I tried using console.log() to check the output and the result is 'valid'. So I can't really tell where I went wrong.

Currently I'm testing this locally using XAMPP.

The Code That I Used

The Javascript:

(function($){

  // Validate Captcha
  $.fn.validateCaptcha = function() {

    challengeField = $('input#recaptcha_challenge_field').val();
    responseField = $('input#recaptcha_response_field').val();

    $.ajax({
        type: 'POST',
        url: the_ajax_script.ajaxurl,
        data: 'action=validate_captcha&recaptcha_challenge_field=' + challengeField + '&recaptcha_response_field=' + responseField,
        async: false,

        success:function(result)
          {
            //console.log( result );

            if(result != 'Valid') {

              $('#captchaError').html('<p class="error">The security code you entered did not match. Please try again.</p>');
              $captchaFlag = 'Invalid';
              Recaptcha.reload();

            } else {

              $('#memberInformation span').css({'color':'green'});
              $('#memberInformation span').html(html.message).show(3000);
              $('#captchaError').html('<p>Success!</p>');
              $captchaFlag = 'Valid';
              dataString = form.serializeArray();
              getSearchMembers(dataString);

            }
          }
      }).responseText;
  }

    $('#registerform').submit(function() {
      var form = $(this);

      if (form.validationEngine('validate')) {
        $('#memberInformation span').html('');
        form.validateCaptcha();
      } else {
        $('#memberInformation span').css('color','#ff0000').html('Please fill out required fields').show(3000);
      }
      return false;
    });

})(jQuery);

The PHP:

function validate_Captha() {
  $privatekey = "xxxxxxxxxx"; //<!----- private key here
  $resp = recaptcha_check_answer ($privatekey,
            $_SERVER["REMOTE_ADDR"],
            $_POST["recaptcha_challenge_field"],
            $_POST["recaptcha_response_field"]);

  if (!$resp->is_valid) {
    // Incorrect CAPTCHA input
    echo "Error\n";
    die ("The reCAPTCHA wasn't entered correctly. Please go back and try it again.\n(reCAPTCHA said: " . $resp->error . ")");
  } else {
    echo "Valid";
    die();
  }
}
add_action( 'wp_ajax_validate_captcha', 'validate_Captha' );
add_action( 'wp_ajax_nopriv_validate_captcha', 'validate_Captha' );
share|improve this question

1 Answer 1

up vote 2 down vote accepted

Just found out that reCaptcha actually rejects CAPTCHAs which are submitted to their server more than once. Since I was using the WP-reCAPTCHA plugin, the plugin resubmitted the CAPTCHA after my AJAX submission. So I just commented out a line from the plugin that does the submission, which is in file recaptcha.php, line 27:

$this->register_filters();
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.