I'm trying to make a good registration form. At first I made a PHP validation script, because I know for sure that it is secure. When I posted my form incorrectly and got an error returned, all my input values were gone. I didn't like that so I learned about validation with Javascript. I don't have much experience with Javascript, but I've managed to validate my form with both client-side and server-side validation, except for the ReCaptcha field.

The problem is that if I fill in the code correctly and press Submit, the client-side verification returns 'Succes' but the server-side validation always returns 'Wrong'.

If I only validate with the server-side script it will return 'Succes' though, so the script itself is fine but somehow they won't work after each other with the same code.

Client-side recaptcha validation script:

function validateCaptcha()
{
challengeField = $("input#recaptcha_challenge_field").val();
responseField = $("input#recaptcha_response_field").val();
//console.log(challengeField);
//console.log(responseField);
//return false;
var html = $.ajax({
    type: "POST",
    url: "handlers/ajax.recaptcha.php",
    data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
    async: false
    }).responseText;

//console.log( html );
if(html == "success") {
    //Add the Action to the Form
    $("form").attr("action", "handlers/register_handler.php");
    //Indicate a Successful Captcha
    $("#captchaStatus").html("Success!");
    // Unment the following line in your application
    return true;
} else {
    $("#captchaStatus").html("The security code you entered did not match. Please try again.");
    Recaptcha.reload();
    return false;
}
}   

ajax.recaptcha.php

<?php
require_once('recaptchalib.php');
$privatekey = "private key";
$resp = recaptcha_check_answer ($privatekey,
                            $_SERVER["REMOTE_ADDR"],
                            $_POST["recaptcha_challenge_field"],
                            $_POST["recaptcha_response_field"]);
if ($resp->is_valid) {
echo "success";
} else {
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
   "(reCAPTCHA said: " . $resp->error . ")");
}
?>

Server-side recaptcha validation script:

require_once('recaptchalib.php');
$privatekey = "private key";
$resp = recaptcha_check_answer ($privatekey,
                            $_SERVER["REMOTE_ADDR"],
                            $_POST["recaptcha_challenge_field"],
                            $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
echo "error"; }
else { echo "succes"; }

They're both allmost the same, so I really don't know what I'm doing wrong here.

Please help me out because I don't want to enter all the information again when I've only got the Captcha code wrong.

Thanks in advance

EDIT: I've discovered the fact that the same challenge field code is used for both client-side verification as the server-side verification. Maybe it won't work because the challenge field code can only be used once? If so, is there a way to make this work for me?

I'm trying to make a good registration form. At first I made a PHP validation script, because I know for sure that it is secure. When I posted my form incorrectly and got an error returned, all my input values were gone. I didn't like that so I learned about validation with Javascript. I don't have much experience with Javascript, but I've managed to validate my form with both client-side and server-side validation, except for the ReCaptcha field.

The problem is that if I fill in the code correctly and press Submit, the client-side verification returns 'Succes' but the server-side validation always returns 'Wrong'.

If I only validate with the server-side script it will return 'Succes' though, so the script itself is fine but somehow they won't work after each other with the same code.

Client-side recaptcha validation script:

function validateCaptcha()
{
challengeField = $("input#recaptcha_challenge_field").val();
responseField = $("input#recaptcha_response_field").val();
//console.log(challengeField);
//console.log(responseField);
//return false;
var html = $.ajax({
    type: "POST",
    url: "handlers/ajax.recaptcha.php",
    data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
    async: false
    }).responseText;

//console.log( html );
if(html == "success") {
    //Add the Action to the Form
    $("form").attr("action", "handlers/register_handler.php");
    //Indicate a Successful Captcha
    $("#captchaStatus").html("Success!");
    // Unment the following line in your application
    return true;
} else {
    $("#captchaStatus").html("The security code you entered did not match. Please try again.");
    Recaptcha.reload();
    return false;
}
}   

ajax.recaptcha.php

<?php
require_once('recaptchalib.php');
$privatekey = "private key";
$resp = recaptcha_check_answer ($privatekey,
                            $_SERVER["REMOTE_ADDR"],
                            $_POST["recaptcha_challenge_field"],
                            $_POST["recaptcha_response_field"]);
if ($resp->is_valid) {
echo "success";
} else {
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
   "(reCAPTCHA said: " . $resp->error . ")");
}
?>

Server-side recaptcha validation script:

require_once('recaptchalib.php');
$privatekey = "private key";
$resp = recaptcha_check_answer ($privatekey,
                            $_SERVER["REMOTE_ADDR"],
                            $_POST["recaptcha_challenge_field"],
                            $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
echo "error"; }
else { echo "succes"; }

They're both allmost the same, so I really don't know what I'm doing wrong here.

Please help me out because I don't want to enter all the information again when I've only got the Captcha code wrong.

Thanks in advance

EDIT: I've discovered the fact that the same challenge field code is used for both client-side verification as the server-side verification. Maybe it won't work because the challenge field code can only be used once? If so, is there a way to make this work for me?

• php
• javascript
• jquery
• ajax
• recaptcha

• 1 There's something wrong here, your first example cannot possibly be client-side since php is a server side technology <?php has no place on the client. reCaptcha has good documentation does it not? – m.edmondson Commented Sep 8, 2011 at 21:47
• You were right there, I've added the javascript code which calls the "client-side" PHP code to my question. – Tim Commented Sep 8, 2011 at 21:51

3 Answers 3

reCaptcha intentionally rejects CAPTCHAs which are submitted to their server more than once (e.g, by both the client-side and server-side validation). You will need to bite the bullet and rewrite your register_handler.php script to either redisplay form input or write it as an AJAX action.

First of all I don't believe you need both of those very similar looking scripts.

What you are trying to achieve is to get jQuery to do a partial post-back via ajax to check with the server and if correct proceed to submit the form. So far this seems to be working fine, except you'll want to set async: true.

When that answer es back instead of "success" a better method would be to return the action you set in this line:

$("form").attr("action", "handlers/register_handler.php");

Currently anyone could bypass your captcha by simply checking the source and constructing their own request to handlers/register_handler.php.

I've just e across this, which I believe should help.

Of course I may have the wrong end of the stick of you're trying to achieve. If so would it be possible to host your problem somewhere?

Here is a different idea: You can repopulate the form with user submitted data if form submission fails. Use session or anything you want to repopulate the form with user submitted data.