рекапчи с Ajax проверки всегда возвращает неправильно, даже если правильно

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> 

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 является асинхронной. У вашего 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' />