Ejercicio 5

2026-05-21 23:20:13 -03:00
parent 5eb8b72c92
commit c084541147
2 changed files with 96 additions and 0 deletions
--- a/clase-9.js
+++ b/clase-9.js
@@ -77,4 +77,81 @@ interno.addEventListener("click", function () {

 externo.addEventListener("click", function () {
    console.log("externo");
+});
+
+//EJERCICIO 5
+
+// 1. Selecciono el formulario y contenedores globales del DOM
+const formulario = document.querySelector("#formulario-contacto");
+const mensajeExito = document.querySelector("#mensaje-exito");
+
+// 2. Registro el Event Listener para el evento "submit"
+formulario.addEventListener("submit", function (e) {
+    // Evito el comportamiento por defecto de recargar la página
+    e.preventDefault();
+
+    // 3. Selecciono los elementos de entrada de datos
+    const inputNombre = document.querySelector("#nombre");
+    const inputEdad = document.querySelector("#edad");
+    const inputMensaje = document.querySelector("#mensaje");
+
+    // 4. Selecciono los elementos contenedores de error
+    const errorNombre = document.querySelector("#error-nombre");
+    const errorEdad = document.querySelector("#error-edad");
+    const errorMensaje = document.querySelector("#error-mensaje");
+
+    // 5. Obtengo y limpio los valores ingresados (eliminando espacios)
+    const nombreVal = inputNombre.value.trim();
+    const edadVal = inputEdad.value.trim();
+    const mensajeVal = inputMensaje.value.trim();
+
+    // Variable de control para el estado de la validación
+    let formularioValido = true;
+
+    // 6. Limpio mensajes de error anteriores y el mensaje de éxito
+    errorNombre.textContent = "";
+    errorEdad.textContent = "";
+    errorMensaje.textContent = "";
+    mensajeExito.style.display = "none";
+    mensajeExito.textContent = "";
+
+    // 7. Valido el campo Nombre (No vacío)
+    if (nombreVal === "") {
+        errorNombre.textContent = "El nombre no puede estar vacío.";
+        formularioValido = false;
+    }
+
+    // 8. Valido el campo Edad (No vacío, entero positivo y menor a 120)
+    // Convierto el string a número entero para las comprobaciones numéricas
+    const edadEntero = parseInt(edadVal, 10);
+
+    if (edadVal === "") {
+        errorEdad.textContent = "La edad no puede estar vacía.";
+        formularioValido = false;
+    } else if (isNaN(edadEntero) || Number(edadVal) !== edadEntero || edadEntero <= 0) {
+        // Valida que sea un número válido, que no tenga decimales y sea mayor a 0
+        errorEdad.textContent = "La edad debe ser un número entero positivo.";
+        formularioValido = false;
+    } else if (edadEntero >= 120) {
+        errorEdad.textContent = "La edad debe ser menor que 120.";
+        formularioValido = false;
+    }
+
+    // 9. Valido el campo Mensaje (No vacío)
+    if (mensajeVal === "") {
+        errorMensaje.textContent = "El mensaje no puede estar vacío.";
+        formularioValido = false;
+    }
+
+    // 10. Si todos los campos son válidos, proceso el formulario
+    if (formularioValido) {
+        // Muestro mensaje de éxito en la página
+        mensajeExito.textContent = "¡Formulario enviado con éxito!";
+        mensajeExito.style.display = "block";
+
+        // Limpio el contenido de cada uno de los campos expuestos del formulario
+        inputNombre.value = "";
+        inputEdad.value = "";
+        inputMensaje.value = "";
+    }
 });