reCAPTCHA with ajax validation always returns wrong even when correct

Question

Live example is as below: http://www.uslegalsupport.com/contact-us-new/

Basically, when you fill out the form entering the required fields of course, if you enter a correct or incorrect captcha, it says it's invalid. I've checked everything I can think of and compared it to http://www.jquery4u.com/forms/setup-user-friendly-captcha-jqueryphp/ - I can't seem to figure out what it is I'm missing and/or doing wrong.

Any help is much appreciated!

JavaScript:

<script type="text/javascript">
//Validate the Recaptcha' Before continuing with POST ACTION
function validateCaptcha()
{
    challengeField = $("input#recaptcha_challenge_field").val();
    responseField = $("input#recaptcha_response_field").val();
    var html = $.ajax({
        type: "POST",
        url: "validateform.php",
        data: "form=signup&recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
        async: false
        }).responseText;
    if(html == "success") {
        //Add the Action to the Form
        $("form").attr("action", "/thank-you-for-contacting-us-new/"); //<-- your script to process the form
        $("#submit").attr("value", "Submit");
        //Indicate a Successful Captcha
        $("#captcha-status").html("<p class=\"green bold\">Success! Thanks you may now proceed.</p>");
    } else {
        $("#captcha-status").html("<p class=\"red bold\">The security code you entered did not match. Please try again.</p>");
        Recaptcha.reload();
    }
}
</script>

HTML Form:

<form id="signup" method="post" action="javascript:validateCaptcha()">

<input class="contacinput" type="text" name="name222" placeholder="Name*" size="40" required><br />
<input class="contacinput" type="text" name="company222" placeholder="Company or Law Firm*" size="40" required><br />
<input class="contacinput" type="text" name="title222" placeholder="Title*" size="40" required><br />
<input class="contacinput" type="text" name="phone222" placeholder="Phone Number*" size="20" required><br />
<input class="contacinput" type="text" name="email222" placeholder="Email*" size="20" required><br />
<input class="contacinput" type="text" name="address222" placeholder="Street Address" size="20"><br />
<input class="contacinput" type="text" name="city222" placeholder="City" size="20"><input class="contacinput" type="text" name="state222" placeholder="State" size="5"><input class="contacinput" type="text" name="zip222" placeholder="Zip*" size="5" required><br />
<input class="contacinput" type="text" name="subject222" placeholder="Subject*" size="40" required><br />
<textarea rows="10" cols="45" class="contacinput" name="message222" placeholder="Message*" required></textarea><br /><br />

</p>

<div id="captcha-wrap">
        <div id="termsckb-wrap"><p class="bold">Type in the words below (separated by a space):</p></div>
        <?php
        require_once("recaptchalib.php");
        $publickey = "my-public-key-is-here"; // you got this from the signup page
        echo recaptcha_get_html($publickey);
        ?>
        <div id="captcha-status"></div>
</div>
            <p style="color: red;" id="captchaStatus">&nbsp;</p>


<input class="wpcf7-form-control wpcf7-submit signup submitbtn" id="signupbutton" value="submit" type="submit" name="signupbutton" />

</form>

validateform.php :

<?php 
require_once("recaptchalib.php");

$privatekey = "my-private-key-is-here"; //<!----- your key here
$resp = recaptcha_check_answer ($privatekey,
                              $_SERVER["REMOTE_ADDR"],
                              $_POST["recaptcha_challenge_field"],
                              $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
  // What happens when the CAPTCHA was entered incorrectly
  //die ("The reCAPTCHA wasn't entered correctly. Please go back and try it again. <a href=\"javascript:history.go(-1)\">Back</a>"
  //"(reCAPTCHA said: " . $resp->error . ")
    echo "fail";
} else {
    echo "success";
}

?>

Answer 1

AJAX is Asynchronous. Your var html does hold a copy of the XMLHttpRequest Object that it creates, but you would have to check html.onreadystatechange , making sure html.readyState === 4 && html.status === 200 to get html.responseText . Use $.ajax({success:function(){/*do stuff here*/}}) or $.ajax({/*Object properties*/}).done(function(){/*do stuff here/*}) , instead. Note that you don't have to use Anonymous Functions, Function names without () will do.

Synopsis:

function validateCaptcha(){
  var challengeField = $('#recaptcha_challenge_field').val();
  var responseField = $('#recaptcha_response_field').val();
  $.ajax({
    type: 'POST',
    url: 'validateform.php',
    data: encodeURI('form=signup&recaptcha_challenge_field='+challengeField+'&recaptcha_response_field='+responseField),
    async: false
  }).done(function(resp){
    if(resp === 'success'){
      $('#signup').submit();
    }
    else{
      $('#captcha-status').html("<p class='red bold'>The security code you entered did not match. Please try again.</p>");
      Recaptcha.reload();
    }
  });
}

or

function validateCaptcha(){
  var challengeField = $('#recaptcha_challenge_field').val();
  var responseField = $('#recaptcha_response_field').val();
  $.ajax({
    type: 'POST',
    url: 'validateform.php',
    data: encodeURI('form=signup&recaptcha_challenge_field='+challengeField+'&recaptcha_response_field='+responseField),
    async: false,
    success: function(resp){
      if(resp === 'success'){
        $('#signup').submit();
      }
      else{
        $('#captcha-status').html("<p class='red bold'>The security code you entered did not match. Please try again.</p>");
        Recaptcha.reload();
      }
    }
  });
}

And do this:

$('#signupbutton').click(validateCaptcha);
$(window).keydown(function(e){
  if(e.keyCode === 13){
    validateCaptcha();
    return false;
  }
}

Also you should change some of your HTML, like:

<form id='signup' method='post' action='/thank-you-for-contacting-us-new/'>

And get rid of that </p> tag that has no opening <p> . And change your type='submit' to type='button' :

<input class='wpcf7-form-control wpcf7-submit signup submitbtn' id='signupbutton' value='submit' type='button' name='signupbutton' />