Cargando

Ir a contenido


 


Validar formulario con Jquery

Muchos proyectos requiere capturar informacion y prevenir posible errores u olvidos del usuario al introducir datos.

Para evitar esto errores lo mejor es validar los formularios de entrada de datos.
En todo proyecto es una tarea obligada y repetitiva.


Escrito por el ago 05 2013 22:17 formulario jquery jquery validation


Para realizar esta tarea utilizaremos Jquery Validation una librería para que el código sea más limpio, compacto y extensible. Esta tecnologia sirve tanto para desarrolladores php como asp.net, ya que se ejecuta del lado del cliente y no en el servidor.

Comenzaremos descargando erl plugin http://jqueryvalidation.org/ y tambuen la utlima versión de JQuery http://jquery.com/download/

Entre las etiquetas <head></head de nuestra web realizamos las llamadas a los script

<script src="js/jjquery-1.10.2.min.js" type="text/javascript"></script>

<script src="js/jquery.validate.js" type="text/javascript"></script>


El plugin jquery.validation trabaja mediante métodos de validación y las reglas de validación que iremos definiendo.

El emtodo de validacion es el tipo de dato por ejemplo un campo de texto numerico y las reglas de validación permiten asociar un elemento de nuestro formulario por ejemplo en texbox a uno o más métodos de validación.

Asi por ejemplo definimos un formulario y una casilla de texto nombre y le asignamos un id y la clase required es decir requerido obligatorio.


<form method="post" id="formdatos">

<p>Nombre <input type="text" id="nombre" name="nombre" class="required" /></p>

<p><input type="submit" value="Enviar" /> </p>

</form>


Luego del formulario ponemos el codigo que hara la validacion


<script type="text/javascript">

$().ready(function() {

$("#formdatos").validate({debug: true});

});

</script>



El resultado si intentamos enviar el fomulario sin escribir nada en el campo nombre es un mensaje este campo es requerido por defecto en ingles.



Vamos añadir un campo email al formulario y al atributo required le asignamos email

<p>Email <input type="text" id="email" name="email" class="required email" /></p>



En este caso podemos ver que ha validado el campo mail y dice que no es un email valido.

TRADUCIENDO LOS MENSAJE DE ERROR

Hemos visto que por defecto jquery validation utiliza el idioma ingles vamos a ver como traducirlo a español. Cuando descargamos el plugin dentro del directorio localization incluye los archivos js con los mesajes traducido a varios idiomas solo debemos elegir el que necesitemos y añadirlo en el <head>, por lo tanto añadirmos


<script src="js/messages_es.js" type="text/javascript"></script>


Refrescamos la web y los cambios se observan con los erroes en español



El archivo de lenguaje es siemple texto que contiene una funcion jquery, por lo tanto podemos abrirlo y editarlo para personalizar los mensajes.

Si quisieramos que un campo no sea validado no le pondremos la clase required. Este plugin soporta varios formatos de datos como valor maximo, valor minimo, fecha, digitos numericos, validacion de enlaces. Tambien podemos crear reglas como un campo edad donde solo se permita introducir valores numericos entre 18 y 99 años


$().ready(function () {

$("#formdatos").validate({

debug: true,

rules: {

edad: {

required: true,

digits: true,

min: 18,

max: 99

}

}

})

})


Este plugin nos permite ahorrar una gran cantidad de tiempo en el desarrollode aplicaciones web y evitar cometer errores en la captura de datos, como por ejemplo.



Las reglas y metodos pueden crearse de mayor complejidad e incluso realizar extesiones mediante funciones jquery como las de traduccion u otras que necesitemos
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado ago 05 2013 22:17
  •   Actualizado ago 05 2013 22:18
  •   Visitas 1.7K
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse