TECNOLÓGICO NACIONAL DE MÉXICO/INSTITUTO TECNOLÓGICO DE OAXACA

PROGRAMACIÓN WEB TEMA 3 PROGRAMACIÓN DEL LADO DEL CLIENTE

PRÁCTICA 3-2 Validación de Formularios en HTML5 con JS

1. Dado el siguiente formulario en HTML

2. Con el siguiente estilo CSS3
3. Construir un validador en JS, que permita validar los campos cuando el usuario ha
terminado de introducir datos en cada uno de ellos, es decir, al perder el foco. Si el campo
no cumple las restricciones, se mostrará una alerta al usuario, pero se le permitirá seguir
introduciendo datos en el resto de campos. Te puedes auxiliar del atributro type de los
elementos input .

En el momento en el que el usuario envíe el formulario (evento submit), se validarán

todos los campos y el formulario no se enviará si alguno de los campos no es válido. Las
restricciones a cumplir son las siguientes:

• El nombre, email y comentarios son campos obligatorios.

• El nombre no debe contener números ni caracteres especiales como: * “ # $ % & ! (
) / y todo aquel que no sea letra. Debe aceptar letras con tilde y con diéresis.
• El campo email debe ser una dirección de email válida pero no debe ser de gmail o
hotmail.
• El texto introducido en el campo de comentarios no debe exceder los 50
caracteres.
• La edad debe ser mayor o igual a 18 años.
• El password debe tener una longitud máxima de 6 caracteres, y contener al menos
una letra minúscula, una letra mayúscula y un dígito.

4.Los datos del programador se deben incluir como comentarios en todos los archivos.

5. En un solo archivo comprime todos los archivos con el código fuente y subirlo en la
plataforma.