Friday, 9 August 2013

Using ReCaptcha with jQuery Validate, giving correct response but gives error

Using ReCaptcha with jQuery Validate, giving correct response but gives error

I'm using jQuery validate with a registration form for my website with a
reCaptcha at the bottom. Here is the script to check the form for errors
(edited to only the relevant parts):
$(document).ready(function() {
jQuery.validator.addMethod("checkCaptcha", function() {
var phpquery = $.ajax({url:"verify.php",
type: "POST",
async: false,
data:{recaptcha_challenge_field:Recaptcha.get_challenge(),recaptcha_response_field:Recaptcha.get_response()},
success:function(resp) {
if (resp == 'false') {
console.dir(resp);
return false;
} else {
console.dir(resp);
return true;
}
}
});
},"");
$('#regForm').validate({
rules:{
recaptcha_response_field:{required:true,checkCaptcha:true}
},
messages:{
recaptcha_response_field:{checkCaptcha:"Your Captcha response was
incorrect. Please try again."}
}
});
});
What happens is when I enter the correct reCaptcha response and either
click submit or tab out of the response text field, it will initially say
true in the console, then immediately throw false and prevent me from
submitting the form.
What also happens is when the incorrect reCaptcha response is entered, it
will throw false like it's supposed to but for every letter I type in, it
will submit that to verify.php and return false. When I finally get done
typing in the correct reCaptcha, it doesn't recognize it as such and still
returns false.
Reloading the reCaptcha also throws a false, even when the correct
response is entered.
I know the verify.php works correctly, because when the <form> would have
action="verify.php," everything would work perfectly (i.e., tell you if
you entered the correct reCaptcha, regardless of how many times you
tried).
Am I missing something? Is there an easier, reliable way to do this?

No comments:

Post a Comment