From d505e030c29c35580ee38fd8cf1e3539fda281f0 Mon Sep 17 00:00:00 2001 From: Juanse Marquez Date: Mon, 1 Jun 2026 18:48:44 -0300 Subject: [PATCH] =?UTF-8?q?Soluci=C3=B3n=20ejercicio=207?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ejercicio7/ejercicio7.js | 47 +++++++++++++++++++++++++++++++++++++++- ejercicio7/estilo.css | 4 ++++ ejercicio7/index.html | 16 ++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) diff --git a/ejercicio7/ejercicio7.js b/ejercicio7/ejercicio7.js index 6ce9e92..6d03849 100644 --- a/ejercicio7/ejercicio7.js +++ b/ejercicio7/ejercicio7.js @@ -1 +1,46 @@ -// Agregar aquí el código javascript +const form = document.querySelector("#formulario"); + +function mostrarError(id, mensaje) { + document.querySelector(id).textContent = mensaje; +} + +function limpiarError(id) { + document.querySelector(id).textContent = ""; +} + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const nombre = document.querySelector("#nombre").value.trim(); + const edad = document.querySelector("#edad").value.trim(); + const password = document.querySelector("#password").value; + + // Limpiamos todos los errores antes de volver a validar. + limpiarError("#error-nombre"); + limpiarError("#error-edad"); + limpiarError("#error-password"); + document.querySelector("#exito").textContent = ""; + + let valido = true; + + if (nombre === "") { + mostrarError("#error-nombre", "El nombre no puede estar vacío."); + valido = false; + } + + if (edad === "" || parseInt(edad) < 0 || parseInt(edad) > 100) { + mostrarError("#error-edad", "La edad no tiene un formato válido."); + valido = false; + } + + if (password.length < 8) { + mostrarError("#error-password", "La contraseña debe tener al menos 8 caracteres."); + valido = false; + } + + // Solo mostramos el éxito si todos los campos son válidos. + if (valido) { + document.querySelector("#exito").textContent = "Formulario enviado correctamente."; + form.reset(); // reset() limpia todos los campos del formulario + } +}); diff --git a/ejercicio7/estilo.css b/ejercicio7/estilo.css index 159b7f6..d37e32d 100644 --- a/ejercicio7/estilo.css +++ b/ejercicio7/estilo.css @@ -1,2 +1,6 @@ /* Agregar el código CSS necesario para el ejercicio */ +.error { + color: red; + font-size: 0.5em; +} diff --git a/ejercicio7/index.html b/ejercicio7/index.html index 205939a..8663faf 100644 --- a/ejercicio7/index.html +++ b/ejercicio7/index.html @@ -8,6 +8,22 @@

Ejercicio 7

+
+
+ + +
+
+ + +
+
+ + +
+ +

+