ejercicio 5: formulario con validaciones y eventos

clase-9.js

@@ -51,3 +51,61 @@ botonCaptura.addEventListener('click', function() {
 externo.addEventListener('click', function() {
     console.log('capturing: externo');
 }, true);
+
+// Ejercicio 5 - Validación de formulario
+const formulario = document.getElementById('formulario');
+const nombreInput = document.getElementById('nombre');
+const edadInput = document.getElementById('edad');
+const mensajeInput = document.getElementById('mensaje');
+const errorNombre = document.getElementById('errorNombre');
+const errorEdad = document.getElementById('errorEdad');
+const errorMensaje = document.getElementById('errorMensaje');
+const formResultado = document.getElementById('formResultado');
+
+function limpiarErrores() {
+    errorNombre.textContent = '';
+    errorEdad.textContent = '';
+    errorMensaje.textContent = '';
+    formResultado.textContent = '';
+}
+
+formulario.addEventListener('submit', function(event) {
+    event.preventDefault();
+    limpiarErrores();
+
+    let esValido = true;
+    const nombre = nombreInput.value.trim();
+    const edadValor = edadInput.value.trim();
+    const mensaje = mensajeInput.value.trim();
+
+    if (!nombre) {
+        errorNombre.textContent = 'El nombre no puede estar vacío.';
+        esValido = false;
+    }
+
+    if (!edadValor) {
+        errorEdad.textContent = 'La edad no puede estar vacía.';
+        esValido = false;
+    } else if (!/^[0-9]+$/.test(edadValor)) {
+        errorEdad.textContent = 'La edad debe ser un número entero positivo.';
+        esValido = false;
+    } else {
+        const edad = parseInt(edadValor, 10);
+        if (edad <= 0 || edad >= 120) {
+            errorEdad.textContent = 'La edad debe ser mayor que 0 y menor que 120.';
+            esValido = false;
+        }
+    }
+
+    if (!mensaje) {
+        errorMensaje.textContent = 'El mensaje no puede estar vacío.';
+        esValido = false;
+    }
+
+    if (esValido) {
+        formResultado.textContent = 'Formulario enviado con éxito.';
+        nombreInput.value = '';
+        edadInput.value = '';
+        mensajeInput.value = '';
+    }
+});