how to test Recaptcha with jQuery Validate plugin

Question

I am using validate jquery plugin and recaptcha for a contact form and i woudld like to know how can i check if the code in the captcha is correct before the form get submitted if not send an error message because right now validate everything but i inserted a wrong code the form get submitted anyway. Here's my code ty in advance for anyhelp ```

Accepted Answer

There is no simple solution only using JavaScript or jQuery. Since you have to compare the Re-Captcha code using the API along with your private key, for proper security, you must do this process with some server-side code.

User fills out form correctly except for Re-Captcha code.

If Re-Captcha code is blank, normal `required` rule in jQuery Validate triggers a "missing Captcha" message. User can try again.

A Re-Captcha code entered (correctly or incorrectly), form is submitted to your server-side code via jQuery `ajax` within the `submitHandler` callback function.

Your server-side code, PHP, Perl, whatever, then uses your private API key to verify the entered Re-Captcha code against the Re-Captcha code expected by the API.

If Re-Captcha code is correct, your server-side code continues as normal and returns a "success" text response to your jQuery `ajax` `success` callback function.

If Re-Captcha code is incorrect, your server-side code will only return an "error" text response to your jQuery `ajax` `success` callback function, and the server-side code will do nothing else.

Within your jQuery `ajax` `success` callback function, read the message text returned from the server-side code.

If the returned message indicates a success, then your form was already submitted successfully and you can redirect, clear out the form, do an animation, print a message, do nothing, or whatever, etc.

If the returned message indicates failure, generate a new Re-Captcha code via JavaScript, display an error message, "incorrect Captcha entered", and the user can simply try again.

This is how I did mine... you'll need to do something very much like the following.

Add a `submitHandler` to your `.validate()` options and use `ajax` to control the form submission. It's the only way you can interact with the Captcha and control form submission.

You'll also need to modify your server-side function to test whether the captcha passed or failed, do the appropriate function, and to return the proper `ajax` message, `msg`. Without knowing anything about your server-side code, it's impossible to say anything more specific.

(NOTE: any solution that is purely JavaScript/jQuery, without editing your server-side code, is not secure. Captcha can be easily bypassed and your private API key is exposed to the public.)

```
$(document).ready(function() {

$("#contact").validate({
        // your other options and rules,
        submitHandler: function (form) {
            $.ajax({
                type: 'POST',
                data: $('form').serialize(),
                url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer
                success: function (msg) {
                    if (msg.indexOf('captcha') != -1) {
                        Recaptcha.reload(); // reloads a new code
                        $('#recaptcha_response_field').before(msg); // error message
                    } else {
                        // anything else to do upon success, animations, etc.
                        // form was already submitted as per ajax
                    }
                }
            });
            return false; // blocks normal form submit
        }
    });

});
```

The following is only a PERL example of how I modified my server-side code which was a Form Mailer script. You'll have to adapt your server-side code in some similar fashion.

The subroutine `check_captcha` is called when the script first runs.

```
sub check_captcha {     
       my $ua = LWP::UserAgent->new();
       my $result=$ua->post(
           'http://www.google.com/recaptcha/api/verify',
           {
               privatekey => 'xxxxxxxxxxxxx',  # insert your private key here
               remoteip   => $ENV{'REMOTE_ADDR'},
               challenge  => $Form{'recaptcha_challenge_field'},
               response   => $Form{'recaptcha_response_field'}
           }
       );

if ( $result->is_success && $result->content =~ /^true/) {
               return;  # OK - continue as normal with Form Mailer
       } else {
               # error, Form Mailer will not continue
               &error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha"
       }
}
```

Remember that this server-side code must return a message that your jQuery picks up within your jQuery `ajax` `success` callback as `msg` above. In my example, if the message contains the word "captcha", that means the code was entered wrong and user must re-enter a new Captcha code.

how to test Recaptcha with jQuery Validate plugin

Solution

Problem