feat: add form validation and submission handling for exercise 5

clase-9.js

@@ -53,4 +53,63 @@ insideButton.addEventListener('click', () => {
 
 outside.addEventListener('click', () => {
     console.log("outside capturing");
-}, true);
+}, true);
+
+// Ejercicio 5
+
+const userForm = document.getElementById('userForm');
+const nameInput = document.getElementById('nameInput');
+const ageInput = document.getElementById('ageInput');
+const messageInput = document.getElementById('messageInput');
+
+const clearErrors = () => {
+    document.getElementById('nameError').textContent = '';
+    document.getElementById('ageError').textContent = '';
+    document.getElementById('messageError').textContent = '';
+}
+
+const validateForm = () => {
+    let isValid = true;
+
+    if (nameInput.value.trim() === '') {
+        document.getElementById('nameError').textContent = 'El nombre es obligatorio.';
+        isValid = false;
+    }
+
+    const age = parseInt(ageInput.value);
+    if (isNaN(age) || age < 0 || age > 120) {
+        document.getElementById('ageError').textContent = 'La edad debe ser un número entre 0 y 120.';
+        isValid = false;
+    }
+
+    if (messageInput.value.trim() === '') {
+        document.getElementById('messageError').textContent = 'El mensaje es obligatorio.';
+        isValid = false;
+    }
+
+    return isValid;
+}
+
+const showSuccessMessage = () => {
+    alert('Formulario enviado con éxito!');
+}
+
+const clearForm = () => {
+    nameInput.value = '';
+    ageInput.value = '';
+    messageInput.value = '';
+}
+
+const handleSubmit = (event) => {
+    event.preventDefault();
+
+    clearErrors();
+
+    const isValid = validateForm();
+
+    if (isValid) {
+        showSuccessMessage();
+        clearForm();
+}}
+
+userForm.addEventListener('submit', handleSubmit);

estilo.css

@@ -14,4 +14,14 @@ li {
     font-weight: bold;
     border-radius: 6px;
     padding: 4px 8px;
+}
+
+.errorMessage {
+    color: red;
+    font-size: 14px;
+}
+
+#successMessage {
+    color: green;
+    font-weight: bold;
 }

index.html

@@ -47,7 +47,27 @@
     </div>
     <hr>
     <div id="ejercicio-5">
-        <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
+        <form id="userForm">
+
+            <label for="nameInput">Nombre:</label>
+            <input type="text" id="nameInput">
+            <p id="nameError" class="errorMessage"></p>
+
+            <label for="ageInput">Edad:</label>
+            <input type="number" id="ageInput">
+            <p id="ageError" class="errorMessage"></p>
+
+            <label for="messageInput">Mensaje:</label>
+            <textarea id="messageInput"></textarea>
+            <p id="messageError" class="errorMessage"></p>
+
+            <button type="submit">
+                Enviar
+            </button>
+
+            <p id="successMessage"></p>
+
+        </form>
     </div>
     <script src="clase-9.js"></script>
 </body>