Ejercicio 5

clase-9.js

@@ -142,3 +142,78 @@ botonCap.addEventListener("click", () => {
    document.querySelector("#nombre").value = "";
    ```
 */
+
+
+
+function validarNombre() {
+
+    const nombre = document.getElementById("nombre").value;
+    if (nombre.trim() === "") {
+        document.getElementById("errorNombre").textContent="El campo nombre no puede estar vacio";
+        return false;
+    }
+
+    document.getElementById("errorNombre").textContent = "";
+    return true;
+
+} 
+
+function validarEdad() {
+
+    const edadTexto = document.getElementById("edad").value;
+
+    if (edadTexto.trim() === "") {
+
+        document.getElementById("errorEdad").textContent = "Escribir la edad";
+        return false;
+    }
+
+    const edad = parseInt(edadTexto);
+
+    if (isNaN(edad)) {
+        document.getElementById("errorEdad").textContent = "La edad no puede ser un texto";
+        return false;
+    }
+    if  (edad <= 0 || edad >= 120) {
+        document.getElementById("errorEdad").textContent = "Edad invalida";
+        return false;
+        }
+    document.getElementById("errorEdad").textContent = "";
+    return true;
+
+}
+
+function validarMensaje () {
+
+    const mensaje = document.getElementById("mensaje").value;
+
+    if (mensaje.trim() === "") {
+
+        document.getElementById("errorMensaje").textContent = "El mensaje no puede estar vacio";
+        return false;
+    }
+
+    document.getElementById("errorMensaje").textContent = "";
+    return true;
+
+}
+
+const form = document.querySelector("#formulario")
+form.addEventListener("submit", (evento) => {
+
+    evento.preventDefault();
+
+   const nombreValido = validarNombre();
+   const edadValida = validarEdad();
+   const mensajeValido = validarMensaje();
+
+     if (nombreValido && edadValida && mensajeValido) {
+
+        document.getElementById("exito").textContent = "Formulario enviado correctamente";
+        document.getElementById("nombre").value = "";
+        document.getElementById("edad").value = "";
+        document.getElementById("mensaje").value = "";
+
+    }
+
+});

index.html

@@ -46,8 +46,21 @@
         </div>
         <hr>
         <div id="ejercicio-5">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+        <form id="formulario">
-        </div>
+
+            <input type="text" id="nombre" placeholder="Escribe tu nombre">
+            <p id="errorNombre"></p>
+            <br>
+            <input type="text" id="edad" placeholder="Escribe tu edad">
+            <p id="errorEdad"></p>
+            <br>
+            <textarea id="mensaje" placeholder="Escribe un mensaje"></textarea>
+            <p id="errorMensaje"></p>
+            <br>
+            <button type="submit">Enviar</button>
+        </form>
+
+        <p id="exito"></p>
         <script src="clase-9.js"></script>
     </body>
 </html>