Como hacer un captcha simple con Jquery validate sin romperse la cabeza
17/07/2014

Como hacer un captcha simple con Jquery validate sin romperse la cabeza


Después de probar varios captcha que encontré por ahí, por cierto muy difíciles de implementar, decidí estudiar las funciones de jquery validate para hacer un captcha que sea simple tanto para mí como para el usuario que quiera contactarse por formulario, y así fue como encontré la siguiente solución:

Primero descargar la versión más reciente de jquery validate de su página oficial:

http://jqueryvalidation.org/

luego creamos un formulario y en cada campo le damos un id, además de darle un id al mismo formulario y a su botón de envío

Un ejemplo del formulario sería así:


< div id="form-div">

     

         < form method="post" id="vender-alquilar" name="vender-alquilar" class="contact-form">

                     

                            < div class="name control-group">

                                Nombre

                               

                                    < input name="nombre" type="text" id="nombre">

                            

                            < /div> 


                            < div class="email control-group">

                               Email

                             

                                    < input name="email" type="text" id="email">

                              

                            < /div>

                        


                            

                            < div class="captcha control-group">

                                  Captcha

                               

                                    < input name="captcha" type="text" id="captcha" placeholder=" 16+2?">

                               

                            < /div>

                            


                            < div class="control-group">

                                Mensaje


                               

                                    < textarea name="mensaje" id="mensaje">< /textarea>

                             

                            < /div>


                          

                                < input type="submit" class="btn btn-primary arrow-right" value="Enviar" id="enviar-contacto">

                           

                        < /form>

                           < /div>


Como vemos el formulario está incluido en un id llamado formulario-enviar, esto es para crear en jquery el efecto de desaparecer cuando es enviado el formulario y afuera del mismo colocamos en otro div un id que se va a mostrar con el mensaje de que se ha enviado el formulario (oculto con jquery).

El captcha entonces funciona de la siguiente manera:  gracias a jquery validate verifica que el número del imput text captcha sea por ejemplo el numero 18 (este número lo definimos nosotros), y si no es da un mensaje de alerta, que se puede personalizar, en mi caso tengo el número 18 y si escribo en el captcha el número 17, me sale un mensaje que dice “Ingrese un número mayor de 17 y menor que 19” y si escribo 19 o mayor, el mensaje es “Ingrese un número menor de 19 y mayor que 17”.

El código que valida el formulario es el siguiente:

 

$("#enviar-ok").hide();

 

    $("# formulario-enviar ").validate({

        rules: {

            nombre: {

                required: true,

                minlength: 2,

            },

                                               email: {

                required: true,

                email: true,

            },

                                               captcha: {

                                                               required: true,

                                                               min: 18,

                                                               max: 18

                                                               },                                              

                                               mensaje: {

                required: true,

               minlength: 10,

            },      

                              },

       messages: {

            nombre: {

                required: "Ingrese su nombre",

                minlength: jQuery.format("Mínimo {0} caractéres")

            },

                                               mensaje: {

                required: "Ingrese su consulta",

                minlength: jQuery.format("Mínimo {0} caractéres")

            },

            email: {

                required: "Ingrese su email",

                email: "Ingrese un email válido"

            },

                                 captcha: {

                required: "Ingrese el número",

                                                               min: jQuery.format("Ingrese un número mayor de 17 y menor que 19"),

                                                               max: jQuery.format("Ingrese un número menor de 19 y mayor que 17")

              

            }                                              

        },

 

Como vemos primero ocultamos el div de aviso de mensaje enviado, y luego validamos.

 

Es la forma fácil que encontré de validar con captcha, si tienes alguno mejor, compártelo con los demás