clase-9.js

@@ -73,4 +73,61 @@ externo1.addEventListener("click", function() {
 //externo - capturing
 //botón
 //interno
-//externo
+//externo
+
+
+
+//Ejercicio 5 de la clase 9
+
+const form = document.querySelector("#formulario");
+form.addEventListener("submit", function(event) {
+    event.preventDefault();
+
+    const nombre = document.querySelector("#nombre").value;
+    const edad = document.querySelector("#edad").value;
+    const mensaje = document.querySelector("#mensaje").value;
+
+    const errorNombre = document.querySelector("#errorNombre");
+    const errorEdad = document.querySelector("#errorEdad");
+    const errorMensaje = document.querySelector("#errorMensaje");
+
+    const resultado = document.querySelector("#resultado");
+
+    errorNombre.textContent = "";
+    errorEdad.textContent = "";
+    errorMensaje.textContent = "";
+    resultado.textContent = "";
+
+    if (nombre.trim() === "") {
+        errorNombre.textContent = "El nombre no puede estar vacío.";
+        errorNombre.classList.add("visible");
+        return;
+    }
+
+    errorNombre.classList.remove("visible");
+
+    if (edad.trim() === "") {
+        errorEdad.textContent = "La edad no puede estar vacía.";
+        errorEdad.classList.add("visible");
+        return;
+    } else if (isNaN(edad) || edad <= 0 || edad >= 120) {
+        errorEdad.textContent = "La edad debe ser un número mayor que 0 y menor que 120";
+        errorEdad.classList.add("visible");
+        return;
+    }
+
+    errorEdad.classList.remove("visible");
+
+    if(mensaje.trim() === "") {
+        errorMensaje.textContent = "El mensaje no puede estar vacío.";
+        errorMensaje.classList.add("visible")
+        return;
+    }
+    errorMensaje.classList.remove("visible");
+
+    resultado.textContent = "Formulario enviado con éxito.";
+
+    document.querySelector("#nombre").value = "";
+    document.querySelector("#edad").value = "";
+    document.querySelector("#mensaje").value = "";
+});

estilo.css

@@ -8,3 +8,11 @@ div {
     background-color: yellow;
     font-weight: bold;
 }
+
+.error {
+    color: red;
+}
+
+.visible{
+    display: block;
+}

index.html

@@ -42,6 +42,24 @@
         <hr>
         <div id="ejercicio-5">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+             <form id="formulario">
+                <label>Nombre:</label>
+                <input type="text" id="nombre">
+                <p id="errorNombre" class="error"></p>
+
+                <label>Edad:</label>
+                <input type="text" id="edad">
+                <p id="errorEdad" class="error"></p>
+
+                <label>Mensaje:</label>
+                <textarea name="mensaje" id="mensaje"></textarea>
+                <p id="errorMensaje" class="error"></p>
+
+
+                <button type="submit">Enviar</button>
+             </form>
+
+             <p id="resultado"></p>
         </div>
         <script src="clase-9.js"></script>
     </body>