cómo probar Recaptcha con jQuery Validate plugin

Estoy usando validar jquery plugin y recaptcha para un formulario de contacto y me gustaría saber cómo puedo verificar si el código en el captcha es correcto antes de que se envíe el formulario si no envía un mensaje de error porque en este momento valida todo, pero inserté un código incorrecto, el formulario se envía de todos modos. Aquí está mi código ty por adelantado para cualquier ayuda

 var RecaptchaOptions = { lang : 'en', theme : 'custom', custom_theme_widget: 'recaptcha_widget' };  
Incorrect please try again
Enter the words above: Enter the numbers you hear:

$(document).ready(function () { $("#contact").validate({ rules: { "name_contact": { required: true, minlength: 3 }, "email_contact":{ required: true }, "message":{ required:true }, "recaptcha_response_field":{ required:true } }, messages: { "name_contact": { required: "Please, enter a name" }, "email_contact":{ required: "Enter a valid email" }, "message":{ required: "Please provide a comment" }, "recaptcha_response_field":{ required: "Captcha is required" } }, errorPlacement: function(error, element) { error.insertBefore(element); } }); });

    No hay una solución simple solo con JavaScript o jQuery. Ya que tiene que comparar el código de Re-Captcha usando la API junto con su clave privada , para la seguridad adecuada, debe hacer este proceso con algún código de servidor .

    1. El usuario completa el formulario correctamente, excepto el código Re-Captcha.

    2. Si el código Re-Captcha está en blanco, la regla required normal en jQuery Validate activa un mensaje de “Captcha perdido”. El usuario puede intentarlo de nuevo.

    3. Un código Re-Captcha ingresado (correcta o incorrectamente), el formulario se envía a su código del lado del servidor a través de jQuery ajax dentro de la función de callback submitHandler .

    4. Su código del lado del servidor , PHP, Perl, lo que sea, luego usa su clave API privada para verificar el código Re-Captcha ingresado contra el código Re-Captcha esperado por la API.

    5. Si el código de Re-Captcha es correcto, el código del lado del servidor continúa normalmente y devuelve una respuesta de texto “exitosa” a la función de callback jQuery ajax .

    6. Si el código de Re-Captcha es incorrecto , su código de lado del servidor solo arrojará una respuesta de texto de “error” a su función de callback jQuery ajax success , y el código del lado del servidor no hará nada más.

    7. Dentro de su función de callback jQuery ajax success , lea el texto del mensaje devuelto por el código del lado del servidor.

    8. Si el mensaje devuelto indica un éxito, entonces su formulario ya se envió correctamente y puede redireccionar, borrar el formulario, hacer una animación, imprimir un mensaje, no hacer nada o lo que sea, etc.

    9. Si el mensaje devuelto indica falla, genere un nuevo código Re-Captcha a través de JavaScript, muestre un mensaje de error, “Captcha ingresó incorrectamente” , y el usuario simplemente puede volver a intentarlo.


    Así es como hice lo mío … tendrás que hacer algo muy parecido a lo siguiente.

    Agregue un submitHandler a sus opciones .validate() y use ajax para controlar el envío del formulario. Es la única forma en que puede interactuar con Captcha y controlar el envío de formularios.

    También deberá modificar su función del lado del servidor para comprobar si el captcha pasó o no, realizar la función adecuada y devolver el mensaje ajax correcto, msg . Sin saber nada sobre el código del lado del servidor, es imposible decir algo más específico.

    ( NOTA: cualquier solución que sea puramente JavaScript / jQuery, sin editar el código del lado del servidor, no es segura. Captcha puede omitirse fácilmente y su clave API privada está expuesta al público).

     $(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 } }); }); 

    El siguiente es solo un ejemplo PERL de cómo modifiqué mi código del lado del servidor, que era un script de Form Mailer. Tendrá que adaptar su código del lado del servidor de alguna manera similar.

    La subrutina check_captcha se check_captcha cuando se ejecuta primero el script.

     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" } } 

    Recuerde que este código del lado del servidor debe devolver un mensaje que su jQuery recoja dentro de su jQuery ajax success callback como msg arriba. En mi ejemplo, si el mensaje contiene la palabra "captcha", significa que el código fue ingresado incorrectamente y el usuario debe volver a ingresar un nuevo código de Captcha.