using reCAPTCHA with ajax....javascript loading problem

Question

I trying to implement reCAPTCHA in one of my forms,...but i am using ajax as the submission. (More specifically the prototype ajax.updater)

Once I submit and error check my form I try to load the reCAPCHTA widget thingy (in my updated div element) which basically just calls a javascript file like so:

<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6Le6SwUAAAAAAIWm8wCRFd8SrI-H0R1Yx4Tkw2Ks"></script>

However the JS file is not being read?...and i've tried all combination of evalScripts:true and evalJS:'force' etc. in the ajax.updater.....however i don't think I have a very good understanding of why the js file isn't processing :(

If anyone can shed some light on this issue I will be very appreciative.

Thanks, Andrew

Answer 1

This doesn't address your exact problem, but 'Dark Side of the Carton' has some excellent code for validating reCAPTCHA via jQuery AJAX which might help.

In summary:

Add the following Javascript:

$(function() {
    function validateCaptcha() {
        var challengeField = $('input#recaptcha_challenge_field').val(),
            responseField  = $('input#recaptcha_response_field').val();

        // alert(challengeField);
        // alert(responseField);
        // return false;

        var html = $.ajax({
            type: 'POST',
            url: 'ajax.recaptcha.php',
            data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
            async: false
        }).responseText;

        if (html.replace(/^\s+|\s+$/, '') == "success") {
            $('#captchaStatus').html(' ');
            // Uncomment the following line in your application
            return true;
        } else {
            $('#captchaStatus').html(
                'Your captcha is incorrect. Please try again'
            );
            Recaptcha.reload();
            return false;
        }
    }

    // Modified as per comments in site to handle event unobtrusively
    $('#signup').submit(function() {
        return validateCaptcha();
    });
});

Then add the ajax.recaptcha.php file which: "outputs only the word “success” if the captcha matches and a message and the response from reCaptchta if it fails. This is important because we are looking for the word success in our validateCaptcha() function."

require_once('/inc/recaptchalib.php');
$publickey  = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX'; // you got this from the signup page
$privatekey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX';

$resp = recaptcha_check_answer(
    $privatekey,
    $_SERVER['REMOTE_ADDR'],
    $_POST['recaptcha_challenge_field'],
    $_POST['recaptcha_response_field']
);

if ($resp->is_valid) {
    ?>success< ?
} else {
    die(
        "The reCAPTCHA wasn't entered correctly. Go back and try it again." .
        "(reCAPTCHA said: " . $resp->error . ")"
    );
}

The example is in PHP, but I adapted it easily to work with Zope/Python