51 lines
2.5 KiB
JavaScript
51 lines
2.5 KiB
JavaScript
// 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 = '';
|
|
}
|
|
})
|