ejercicio7

ejercicio7/ejercicio7.js

@@ -1 +1,50 @@
 // Agregar aquí el código javascript
+
+// ## Ejercicio 7: Formulario con validación
+
+// Crear un formulario con los campos nombre, edad y contraseña. Al enviarlo,
+// validar:
+
+// - Que ningún campo esté vacío.
+// - Que la edad contenga números enteros entre 0 y 100.
+// - Que la contraseña tenga al menos 8 caracteres.
+
+// Si hay errores, mostrarlos en la página junto a cada campo. Si todo es válido,
+// ocultar los errores y mostrar un mensaje de éxito.
+
+//creamos las variables
+let formulario = document.querySelector('form');
+let inputNombre = document.querySelector('#input-nombre');
+let inputEdad = document.querySelector('#input-edad');
+let inputPassword = document.querySelector('#input-password');
+let mensajeErrorNombre = document.querySelector('#nombre-error');
+let mensajeErrorEdad = document.querySelector('#edad-error');
+let mensajeErrorPassword = document.querySelector('#password-error');
+
+//creamos el listener que se activara al enviar el form
+formulario.addEventListener('submit' ,(e)=>{
+    e.preventDefault();
+    // una vez activado el listener empezamos a validar los valores recibidos
+    if(inputNombre.value === ''){   //si el nombre esta vacio, llenamos el mensaje de error
+        mensajeErrorNombre.textContent = 'Ingresa tu nombre'
+    } else {mensajeErrorNombre.textContent = ''} // Si el nombre NO esta vacio, borramos el mensaje de error
+    if(inputEdad.value === ''){
+        mensajeErrorEdad.textContent = 'Ingresa tu edad'
+    } else if(inputEdad.value < 0 || inputEdad.value > 100 ){ // si es menor a 0 o mayor a 100 llenamos el mensaje de error
+        mensajeErrorEdad.textContent = 'Edad fuera de limites'
+    } else {mensajeErrorEdad.textContent = ''} // si nunguno de los errores surge, vaciamos el mensaje de error
+    if(inputPassword.value === ''){
+        mensajeErrorPassword.textContent = 'Ingrese la password'
+    } else if (inputPassword.value.length < 8){     // si tiene menos de 8 caracteres llenamos el mensaje de error
+        mensajeErrorPassword.textContent =  'Password corta'
+    }
+        else {mensajeErrorPassword.textContent = ''}
+
+    // Si los 3 mensajes de error estan vacios, damos el formulario por valido (importante que esta condicion este en el final del listener)    
+    if (mensajeErrorNombre.textContent == '' && mensajeErrorEdad.textContent == '' && mensajeErrorPassword.textContent == ''){
+        alert('Formulario enviado con exito'); // informamos el envio del formulario
+        inputNombre.value = ''; // y vaciamos los inputs
+        inputEdad.value = '';
+        inputPassword.value = '';
+    }
+})