Using Recaptcha with Jquery Validation

Question

i'm building a contactform using Jquery Validation. At the bottom of my form a google reCAPTCHA widget.

I can't seem to find out how I can add the captcha in my Jquery Validation.

This is my code :

submitHandler: function(form) {
        $(form).ajaxSubmit({
            type:"POST",
            data: $(form).serialize(),
            url:"../php/process.php",
            success: function() {
                //$('#success').fadeIn();
               $('#contact :input').attr('disabled', 'disabled');
               $('#contact').fadeTo( "slow", 0, function() {
                    $(this).find(':input').attr('disabled', 'disabled');
                    $(this).find('label').css('cursor','default');
                    $('#success').fadeIn();
                });
            },

And this is my php:

//recaptcha
$recaptcha_secret = "6LffhgcTAAAAAMETO_XZOZn4dztphW3GM9DbSsd0";
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
    $response = json_decode($response, true);

if($response) {
$send = mail($to, $subject, $message, $headers);
}
else
{
    return false;
}

I'm a beginner with this and I don't know how I can make this work.

Any help is welcome.

Thank you

Answer 1

Check out this step by step guide which will help you out in setting this up properly-

http://www.sitepoint.com/setup-user-friendly-captcha-jqueryphp/

The prime concept is the validation of your form and google captcha via AJAX on the server before continuing with the POST action.