带有 ajax 验证的 reCAPTCHA 即使正确也总是返回错误

Question

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

基本上，当您填写表格并输入必填字段时，如果您输入了正确或错误的验证码，它就会说它是无效的。我检查了我能想到的所有内容，并将其与 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>

验证表单.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 是异步的。您的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' />