Validate - ejemplo en Ajax y Javascript para validar formularios.

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

Este ejemplo en Ajax y Javascript, es una muy buena opción para poder validar la entrada de datos en un formulario web. Es completamente gratis y de libre uso, además es simple de instalar.

Con el script podrás utilizar varios tipos y modos de validación de datos, entre ellos : para números, fechas, direcciones web, campos alfanuméricos, de tipo moneda, de contraseñas entre otros.

El ejemplo utiliza Prototype, una librería gratuita para la programación de páginas web dinámicas. Para ver mas información sobre esta librería, pulsa este enlace.

A continuación, se describen las características principales de este ejemplo para que puedas implementarlo en tu sitio, blog, o página web, incluyendo también una simple guía de instalación.

Mas información sobre el programa.

Indice - Contenido.

  1. Descripción e información general.
  2. Instalación del script en la página web.
    1. Incluir los archivos javascript.
    2. Establecer el formulario para la validación.
    3. Indicar en cada campo el tipo de validación
  3. Listado con los distintos tipos de validación que se pueden utilizar.
  4. Ejemplos que incluye el archivo de descarga.

 

1 - Descripción e información general.

A diferencia de otros ejemplos para validar formularios, los mensajes de validación que se mostrarán al usuario, se visualizan sin cuadros de diálogo.

En este caso, se muestra una leyenda o texto debajo del campo de formulario, remarcándolo de color rojo. Esto, sin necesidad de volver a recargar o actualizar la página en el navegador web.

Aquí puedes ver una vista previa luego de aplicar la validación de datos al cambiar el foco en el control.

2 - Instalación del script en la página web.

Para poder definir el tipo de validación que queremos implementar para cada campo de formulario, por ejemplo si debe permitir solo números, solo caracteres alfanuméricos, solo fechas etc .., en la web del autor hay una guía de como hacerlo, y también como incluir las librerías dentro de la página y realizar otras configuraciones, por ejemplo:

  • Uso de funciones callback para controlar eventos.
  • Validar otro tipo de controles.
  • Indicar longitud máxima de caracteres.
  • Resetear todos los campos, entre otros).

De todas formas, aquí se describen los pasos básicos para que puedas instalar y poner en funcionamiento el script en tu página web.

2.1 - Incluir los archivos javascript.

Para poder realizar las validaciones, lo primero que debemos hacer es hacer referencia a dos ficheros javascript.

Para ello, deberás Incluir el archivo prototype.js y validation.js en la sección HEAD de la página.

2.2 - Establecer el formulario para la validación

El script utiliza una función que permite realizar la validación. Esta simple función requiere de un sólo parámetro donde debemos indicarle a la misma cuál es el formulario que estamos utilizando.

Entonces, como segundo paso, a la función Validate, le enviamos el ID del formulario como argumento o parámetro:

2.3 - Indicar en cada campo el tipo de validación

En este último paso y el mas importante, nos quedará definir que tipo de validación emplear para cada campo.

Esto se define en el atributo Class, donde deberemos establecer la opción que define el tipo de validación.

Por ejemplo, para que un campo del formulario acepte como valor sólo direcciones URL, el valor en Class sería Validate-url:

En este otro ejemplo que se muestra a continuación, es igual que el anterior, y sólo se aceptarán direcciones URL, pero el campo también es requerido, es decir que no se podrá dejar en blanco. (Es igual pero se le añade la palabra required):

Acepta solo números ( El campo es opcional ya que no incluye la palabra required)

3 - Listado con los distintos tipos de validación que se pueden utilizar.

La lista de opciones para poder validar cada campo es la siguiente:

  • required: El campo no se puede dejar en blanco.
  • validate-number: Solo números, por ejemplo: 1.235
  • validate-digits: Solo dígitos., por ejemplo 36958745
  • validate-alpha: por ejemplo: abc
  • validate-alphanum: Ejemplo: a1b1c1
  • validate-date: Una fecha válida, eje: 05/11/1998
  • validate-email: Una dirección de correo.
  • validate-date-au: Fecha con formato
  • validate-currency-dollar: para campos de tipo moneda.
  • validate-one-required: Para utilizar con radiobuttons.
  • validate-selection: Para listas desplegables.

4 - Ejemplos que incluye el archivo de descarga

El archivo de descarga, incluye una página con tres ejemplos. También muestra como realizar validaciones a controles radiobuttons, listas desplegables, y como aplicar efecto fade para desplegar los mensajes de error mediante el script effects.js.


Requerimientos de instalación y uso.

Requiere: prototype.js

Videos tutoriales.

 

Cambios, actualizaciones y mejoras del programa.

Buscar programas


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

Enlaces patrocinados.


Detalles y descargar

Web:
Licencia:
Gratis
Versión:
1.5.4
Idioma:
Inglés
Programa actualizado:
29 NOV 2010


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