使用ajax验证的reCAPTCHA总是返回错误，即使是正确的 - reCAPTCHA with ajax validation always returns wrong even when correct

示例如下：http://www.uslegalsupport.com/contact-us-new/

基本上，当你填写表格并输入必填字段时，当然，如果你输入了正确或不正确的captcha，它会说它是无效的。我已经检查了我能想到的一切，并将其与http://www.jquery4u.com/forms/setup-user-friendly-captcha-jqueryphp/-我似乎不明白我错过了什么和/或做错了什么。

非常感谢您的帮助！

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 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";
}
?>

AJAX是异步的。您的var html确实保存了它创建的XMLHttpRequest对象的副本，但您必须检查html.onreadystatechange，确保html.readyState === 4 && html.status === 200才能获得html.responseText。请改用$.ajax({success:function(){/*do stuff here*/}})或$.ajax({/*Object properties*/}).done(function(){/*do stuff here/*})。请注意，您不必使用匿名函数，没有()的函数名即可。

简介：

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();
    }
  });
}

或

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();
      }
    }
  });
}

这样做：

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

此外，您还应该更改一些HTML，如：

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

并去掉没有打开<p>的</p>标签。并将您的type='submit'更改为type='button':

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