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

Answer 2

Be careful using any sort of client-side script, such as JavaScript, for validation. You have no control over the end-user's browser. The purpose of a CAPTCHA is to prevent automated submissions of a form. Anyone sophisticated enough to set that up isn't going to have a problem overriding your JavaScript validation and CAPTCHA checking. For example, they could set validateCaptcha() to always return true, bypassing your careful checks - or just disable JavaScript.

That being said, there's nothing wrong with performing the entire form submission with ajax and using the results of the CAPTCHA check to determine if the form gets processed or not.

The important point is that the decision of whether or not to handle the form has to be made on the server-side, not the client-side.

Why client-side validation is not enough