From 1f6bb5fa62e4f6939c972e9a0f05afd2a180aa70 Mon Sep 17 00:00:00 2001 From: romeo Date: Mon, 1 Jun 2026 13:55:29 -0300 Subject: [PATCH] ejercicio7 --- ejercicio7/ejercicio7.js | 49 ++++++++++++++++++++++++++++++++++++++++ ejercicio7/index.html | 16 ++++++++++++- 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/ejercicio7/ejercicio7.js b/ejercicio7/ejercicio7.js index 6ce9e92..fdf9469 100644 --- a/ejercicio7/ejercicio7.js +++ b/ejercicio7/ejercicio7.js @@ -1 +1,50 @@ // Agregar aquí el código javascript + +// ## Ejercicio 7: Formulario con validación + +// Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo, +// validar: + +// - Que ningún campo esté vacío. +// - Que la edad contenga números enteros entre 0 y 100. +// - Que la contraseña tenga al menos 8 caracteres. + +// Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido, +// ocultar los errores y mostrar un mensaje de éxito. + +//creamos las variables +let formulario = document.querySelector('form'); +let inputNombre = document.querySelector('#input-nombre'); +let inputEdad = document.querySelector('#input-edad'); +let inputPassword = document.querySelector('#input-password'); +let mensajeErrorNombre = document.querySelector('#nombre-error'); +let mensajeErrorEdad = document.querySelector('#edad-error'); +let mensajeErrorPassword = document.querySelector('#password-error'); + +//creamos el listener que se activara al enviar el form +formulario.addEventListener('submit' ,(e)=>{ + e.preventDefault(); + // una vez activado el listener empezamos a validar los valores recibidos + if(inputNombre.value === ''){ //si el nombre esta vacio, llenamos el mensaje de error + mensajeErrorNombre.textContent = 'Ingresa tu nombre' + } else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error + if(inputEdad.value === ''){ + mensajeErrorEdad.textContent = 'Ingresa tu edad' + } else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error + mensajeErrorEdad.textContent = 'Edad fuera de limites' + } else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error + if(inputPassword.value === ''){ + mensajeErrorPassword.textContent = 'Ingrese la password' + } else if (inputPassword.value.length < 8){ // si tiene menos de 8 caracteres llenamos el mensaje de error + mensajeErrorPassword.textContent = 'Password corta' + } + else {mensajeErrorPassword.textContent = ''} + + // Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener) + if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){ + alert('Formulario enviado con exito'); // informamos el envio del formulario + inputNombre.value = ''; // y vaciamos los inputs + inputEdad.value = ''; + inputPassword.value = ''; + } +}) diff --git a/ejercicio7/index.html b/ejercicio7/index.html index 205939a..b57ca7c 100644 --- a/ejercicio7/index.html +++ b/ejercicio7/index.html @@ -8,7 +8,21 @@

Ejercicio 7

- +
+ + + +
+ + + +
+ + + +
+ +