Validar los datos enviados en un formulario

En Dreamweaver podemos asociar comportamientos para que los datos que enviamos en un formulario cumplan ciertas condiciones, como por ejemplo, que sean números, direcciones de correo electrónico, datos que haya que cumplimentar obligatoriamente, etc.


Vamos a ver un ejemplo para explicarlo:

Partimos de un formulario llamado datos en el cual hemos creado tres campos de texto.


Los datos se enviarán por correo electrónico, pero queremos que se cumplan las siguientes condiciones:

El campo edad debe ser un número comprendido entre 18 y 120
El campo email debe ser una dirección de correo electrónico, es decir debe contener una arroba.

Para asociar el comportamiento al formulario nos situamos en la etiqueta form:



A continuación accedemos al panel comportamientos:



Pulsamos el + y elegimos la opción Validar formulario:


Se abre la ventana Validar formulario, en la que vemos los campos insertados.

Seleccionamos el campo Edad y activamos la opción Numero, escribimos en el primer valor 18 y en el último valor 120, para indicar el intervalo de edad que permitimos.



Seleccionamos el campo Email y activamos la opción Valor Obligatorio y Dirección de correo electrónico.



Pulsamos Aceptar.

Observamos que el comportamiento Validar formulario está asociado al evento onSubmit del formulario, es decir el formulario se validará en el momento que enviemos el formulario pulsando el botón Enviar:



Guardamos los cambios y comprobamos el funcionamiento del formulario en el navegador. En nuestro ejemplo utilizamos Internet Explorer.

Introducimos datos en el campo edad y en el campo correo electrónico que no cumplen las condiciones.

Pulsamos enviar y vemos el mensaje de error que indica que el campo edad no contiene un número que cumpla el intervalo establecido y que el campo email debe contener una dirección de correo electrónico:




Si cambiamos los datos de forma que cumplan las condiciones, enviaremos el formulario sin problemas:

0 comentarios:

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Top WordPress Themes