jQuery.Validator - Validar formularios con jQuery.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Este plugin programado en jQuery, fue creado para reducir al mínimo el código Javascript necesario en una página HTML cuando necesitamos implementar validación de formularios webs.

El script y los ejemplos son muy completos, por ejemplo con el script podrás validar: fechas, números telefónicos, números de teléfonos celulares, direcciones de correo electrónico, direcciones URL, el ingreso de números ( enteros, decimales ), campos de formularios requeridos, campos para captchas, fecha de cumpleaños, nombres de dominio, direcciones ftp, direcciones HTTP, números de seguro social, entre otras opciones de validación.

La implementación es mas que sencilla, sólo deberás añadir un atributo a cada campo de formulario que quieras validar, es decir una única línea de código. (El atributo a añadir a la etiqueta input, obviamente varía de acuerdo al tipo de validación a utilizar. Por ejemplo para validar una dirección url, se utiliza validate_url, para validar el ingreso de un número entero, validate_integer.

A continuación puedes ver mas información.

Mas información sobre el programa.

Indice - Contenido.

  1. Cómo validar formularios con este script.
  2. Validación de Formulario y mensajes de error.
  3. Traducir mensajes de error de validación de inglés a Español.
  4. Otros ejemplos de validación.

 

1 - Cómo validar formularios con este script.

Como se describió antes es muy simple. A cada campo de formulario, en la etiqueta Input, se debe definir un atributo Data-Validation. El valor a insertar en dicho atributo, definirá el tipo de validación a emplear, por ejemplo:

La lista de valores que puedes insertar en el atributo Data-Validation es la siguiente:

  • validate_url: Validación de direcciones url.
  • validate_date — yyyy-mm-dd: validación de fecha con el formato Año/mes/día.
  • validate_email: Una dirección de email.
  • validate_time — hh:mm: Validar una hora.
  • validate_domain — Validar un nombre de dominio, por ejemplo www.sitio_web.com
  • validate_phone — Teléfonos
  • validate_swemob — Número de teléfonos móviles.
  • validate_float: número decimal.
  • validate_int: Número entero.
  • validate_length — Validar cantidad de caracteres, puedes ser 3 caracteres mínimos hasta 30
  • validate_confirmation: Campo de confirmación.
  • validate_spamcheck: Para captchas.
  • required: Campo requerido. No realiza ninguna validación, lo único que requiere es que el campo de formulario no quede vacío.
  • validate_custom: Para crear validaciones personalizadas, mediante expresiones regulares, por ejemplo /^[a-z]{2} [0-9]{2}$/

2 - Validación de Formulario y mensajes de error.

El script, en el momento de comprobar el dato del campo del formulario, si este es incorrecto, mostrará un mensaje de error debajo del campo y en letra roja. También cambia el color del campo de formulario.

Esta es una vista previa de 5 campos de formulario. El primer campo es incorrecto ya que requiere un texto no mayor a 5 caracteres, y también el campo Dominio es incorrecto por que la dirección URL, si bien se encuentra escrita de forma correcta, le falta el protocolo en la dirección (HTTP, FTP, HTTPS)

3 - Traducir mensajes de error de validación de inglés a Español.

Debido a que los mensajes de error de validación se encuentran en idioma inglés, puedes cambiar la traducción a español, editando el archivo validate.js que se incluye junto con el ejemplo.

Esto es muy sencillo de modificar. Cada mensaje de error se define en variables. Estas comienzan dentro del código fuente en la línea 18.

Aquí puedes ver una captura del código fuente de estas variables.

Por ejemplo podrías utilizar la siguiente traducción o modificar esta a tu gusto:

  • errorTitle : 'Error al enviar el formulario!',
  • requiredFields : 'No se respondido a todos los campos requeridos',
  • badTime : 'Valor de hora incorrecto',
  • badEmail : 'Usted no ha ingresado una dirección de email válida',
  • badTelephone : 'No se ha ingresado un número de teléfono correcto',
  • badSecurityAnswer : 'La pregunta de seguridad no es correcta',
  • badDate : 'La fecha ingresada no es válida',
  • toLongStart : 'You have given an answer longer then ',
  • toLongEnd : ' Caracteres',
  • toShortStart : 'Usted ha dado una respuesta más corta ',
  • toShortEnd : ' Caracteres',
  • badLength : 'Usted tiene que dar una respuesta entre',
  • notConfirmed : 'Los valores no se han podido confirmar',
  • badDomain : 'El nombre del sitio web no es válido',
  • badUrl : 'Error en el campo de dirección URL',
  • badFloat : 'Valor decimal incorrecto',
  • badCustomVal : 'Usted dio una respuesta incorrecta',
  • badInt : 'Valor entero no válido',
  • badSecurityNumber : 'Número de seguridad social incorrecto'

A continuación se muestra una captura de pantalla con los campos de formularios validados y su mensaje de error utilizando la traducción a Español.

4 - Otros ejemplos de validación

Desde la web del autor, pulsando en este enlace, podrás ver además tres ejemplos mas:

  • Cómo utilizar este plugin de jQuery para crear un simple sistema de Captcha.
  • Personalizar varios aspectos, por ejemplo los errores, colores del borde de los campos de entrada, cambiar la posición de los mensajes de error etc ..
  • Crear un campo de confirmación de contraseña.

 


Requerimientos de instalación y uso.

Requiere : librería jQuery.

Compatible con los siguiente navegadores:

  • Internet explorer.
  • FireFox.
  • Google Chrome.
  • Safari.
  • Opera.
  • Otros.

Videos tutoriales.

No hay video tutoriales disponibles para este script.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
plugins.jquery.com
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: