Validar formularios con Jquery

Ferchu Javascript / Ajax, Jquery

Bueno, una de las principales funciones de Javascript y uno de los motivos por los cuales se creó este lenguaje son las validaciones de formulario.

Todo usuario de internet alguna vez ha completado un formulario y al tratar de enviarlo le apareció un mensaje mostrando que había algún campo vacío o incorrecto. Pero gracias a Javascript podremos validar formularios desde el lado del cliente (navegador) evitando que llegue información inútil al servidor.

Sin embargo voy a aclarar algo muy importante antes de seguir, si bien validar el envío de datos antes de ser procesados con Javascript es muy importante, también tener en cuenta que las validaciones en el servidor (por ejemplo con PHP) nunca deberían faltar, ya que el usuario puede tener Javascript deshabilitado o bien éste puede burlar fácilmente esta seguridad con conocimientos medios de internet.

Validar formularios con Javascript lleva demasiado tiempo creando las funciones para cada regla y muchas veces se torna una tarea tan necesaria como densa. Sin embargo Jquery a través de su librería validate.js lo hace demasiado fácil.

En primer lugar para este ejemplo usaré la versión de Jquery 1.8 y la librería para validación de formularios nombrado en el anterior párrafo de esta forma:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

El proceso de validación para cada campo de formulario es muy sencillo, simplemente debemos agregar al formulario una class con la validación que queremos validar. Por ejemplo para validar que un input sea obligatorio completarlo deberíamos hacer algo así:

<input type="text" class="required" />

Con eso a Jquery le alcanza para validar ese campo. Pero también podríamos tener dos reglas, que sea obligatorio y que sea un número. En ese caso:

<input type="text" class="required number" />

Y listo!

Ahora, para que al presionar el botón submit nos valide ese formulario debemos incluir esto:

$("#id_del_formulario").validate();

Si el formulario es correcto el formulario será enviado, de lo contrario mostrará los errores por pantalla.

Veamos un ejemplo muy sencillo:

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript">
       function validarFormulario(){
          $("#formulario").validate();
       }
       $(document).ready(function(){
          validarFormulario();
       });
    </script>
    <style type="text/css">
       .error {color: #f00;}
    </style>
 </head>
 <body>
    <form id="formulario" action="" method="post">
       <label for="nombre_y_apellido"> (*) Nombre y apellido </label>
       <br />
       <input type="text" name="nombre_y_apellido" id="nombre_y_apellido" class="required" />
       <br />
       <label for="sueldo"> (*) Sueldo estimativo </label>
       <br />
       <input type="text" name="sueldo" id="sueldo" size="5" maxlength="5" class="required number" />
       <br />
       <label for="email"> (*) E-mail </label>
       <br />
       <input type="text" name="email" id="email" class="required email" />
       <br />
       <label for="telefono"> Tel&eacute;fono </label>
       <br />
       <input type="text" name="telefono" id="telefono" />
       <br />
       <label for="cv"> Cv </label>
       <br />
       <textarea rows="5" cols="50" name="cv" id="cv" class="required"></textarea>
       <br />
       (*) Campos requeridos
       <br />
       <input type="submit" id="enviar" value="Enviar" />
       <div id="contenedor_errores"></div>
    </form>
 </body>
</html>

¡Probarlo!

Ahora bien, también sucede otra cosa que seguramente habrás notado y es que los mensajes de error son mostrados en inglés, para personalizar los mensajes deberíamos cambiar la función:

function validarFormulario(){
   $("#formulario").validate();
}

Por esto:

function validarFormulario(){
   jQuery.validator.messages.required = 'Esta campo es obligatorio.';
   jQuery.validator.messages.number = 'Esta campo debe ser num&eacute;rico.';
   jQuery.validator.messages.email = 'La direcci&oacute;n de correo es incorrecta.';
   $("#formulario").validate();
 }

Ahora ya sabemos cómo validar formularios antes de ser enviados al servidor, pero hay un asunto más. Pensemos cómo funciona el método .validate(), al detectar que el usuario pulsó el botón submit levantará todas las etiquetas y revisará las reglas de los campos de formularios que son los valores de las clases, y si todos los campos son correctos enviará el formulario. Sin embargo es muy probable que nosotros no queramos enviar el formulario, por ejemplo, si usamos Ajax no necesitamos enviar el formulario ya que eso implica recargar la página, y nosotros solamente necesitamos saber si el formulario está validado. Para ello cambiaremos el método .validate() por .valid(), el cual nos devolverá true o false dependiendo de si el formulario está correcto o no, y lo comprobaremos con un evento .click(). Cambiar esto:

function validarFormulario(){
    jQuery.validator.messages.required = 'Esta campo es obligatorio.';
    jQuery.validator.messages.number = 'Esta campo debe ser num&eacute;rico.';
    jQuery.validator.messages.email = 'La direcci&oacute;n de correo es incorrecta.';
    $("#formulario").validate();
}

Por esto:

function validarFormulario(){
    jQuery.validator.messages.required = 'Esta campo es obligatorio.';
    jQuery.validator.messages.number = 'Esta campo debe ser num&eacute;rico.';
    jQuery.validator.messages.email = 'La direcci&oacute;n de correo es incorrecta.';
    $("#enviar").click(function(){
       var validado = $("#formulario").valid();
       if(validado){
          alert('El formulario es correcto.');
       }
    });
}

 

 


8 Respuestas a “Validar formularios con Jquery”

  3. Hola, mi boton es type=»button», como haria en ese caso para validarlo? No lo puedo cambiar debido a que estoy usando otra accion en el formulario.

    1. Sí, tenés que hacer algo como esto:

      var validado = $(«#id_de_tu_formulario»).valid();

      Ese método valid() te va devolver true o false, dependiendo de si el formulario está validado o no.

      Saludos!

  4. Hola….
    Has intentado cambiar los colores que vienen por defecto cuando se identifica que un campo no está validado??? Por ejemplo que el input y la letra del mensaje se pongan de color rojo. Algo así como lo hace Bootstrap…

    Saludos

    1. Sí, algo como esto:

      $.validator.setDefaults({
      errorClass: ‘tu_estilo_de_erro’
      });

      Saludos!