diff --git a/index.html b/index.html index 75772b2a..4026d4c3 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,7 @@ - + diff --git a/instrucciones/nivel1.md b/instrucciones/nivel1.md index 0e2b3271..528e10e1 100644 --- a/instrucciones/nivel1.md +++ b/instrucciones/nivel1.md @@ -222,7 +222,7 @@ Atención: No se olviden de la `,` para separar múltiples valores. let cuentaErrores = 0; ``` - 6. Verificamos si hay un error en `nombr`e + 6. Verificamos si hay un error en `nombre` ``` if (errores.nombre) { diff --git a/js/pruebas.js b/js/pruebas.js index 9cbb4229..d79e5cb8 100644 --- a/js/pruebas.js +++ b/js/pruebas.js @@ -1,15 +1,118 @@ +probarValidarNombre(); +probarValidarCiudad(); +probarValidarComportamiento(); +probarValidarDescripcionRegalo(); + function probarValidarNombre() { - console.assert( - validarNombre('') === 'Este campo debe tener al menos 1 caracter', - 'Validar nombre no validó que el nombre no sea vacío', - ); - console.assert( - validarNombre( - '111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === - 'Este campo debe tener menos de 50 caracteres', - 'Validar nombre no validó que el nombre sea menor a 50 caracteres', - ); + console.assert( + + validarNombre('') === 'El nombre no debe estar vacio', + 'validarNombre no validó que nombre este vacío' + + ) + + console.assert( + + validarNombre('f') === 'El nombre debe tener al menos 2 caracteres', + 'validarNombre no validó que nombre tenga al menos 2 caracteres' + + ) + + console.assert( + + validarNombre('11111111111111111111111111111111111111111111111111') === 'El nombre no debe tener mas de 50 caracteres', + 'validarNombre no validó que nombre tenga menos de 50 caracteres' + + ) + + console.assert( + + validarNombre('21323321') === 'El nombre solo acepta letras', + 'validarNombre no validó que nombre solo contenga letras' + + ) + + console.assert( + + validarNombre('Facundo') === '', + 'validarNombre no validó un nombre correcto' + + ) + } -probarValidarNombre(); +function probarValidarCiudad() { + + console.assert( + + validarCiudad('') === 'Debe elegir una ciudad', + 'validarCiudad no validó que se ingrese una ciudad' + + ) + + console.assert( + + validarCiudad('Santa fe') === '', + 'validarCiudad no validó que se ingrese un valor correcto' + + ) + +} + +function probarValidarComportamiento() { + + console.assert( + + validarComportamiento('') === 'Este campo no puede estar vacio', + 'validarComportamiento no validó que se ingrese 1 valor en comportamiento' + + ) + + console.assert( + + validarComportamiento('maso') === '', + 'validarComportamiento no validó que se ingrese un comportamiento válido' + + ) + +} + +function probarValidarDescripcionRegalo() { + + console.assert( + + validarDescripcionRegalo('') === 'El campo descripcion regalo no puede estar vacio', + 'validarDescripcionRegalo no validó que se ingrese vacio en descripcion del regalo' + + ) + + console.assert( + + validarDescripcionRegalo('abc') === 'El campo descripcion regalo debe tener al menos 4 caracteres', + 'validarDescripcionRegalo no validó que se ingresen al menos 4 caracteres en descripcion del regalo' + + ) + + console.assert( + + validarDescripcionRegalo('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111') === 'El campo descripcion regalo no debe tener mas de 250 caracteres', + 'validarDescripcionRegalo no validó que se ingrese menos de 250 caracteres en descripcion del regalo' + + ) + + console.assert( + + validarDescripcionRegalo(',.,.,.,.,.') === 'El campo descripcion regalo solo acepta letras y numeros', + 'validarDescripcionRegalo no validó que se ingrese solo letras y numeros' + + ) + + console.assert( + + validarDescripcionRegalo('Hola santa quiero un...') === '', + 'validarDescripcionRegalo no validó que se ingrese una descripcion válida' + + ) + +} diff --git a/js/tarea-clase-8.js b/js/tarea-clase-8.js new file mode 100644 index 00000000..f6072310 --- /dev/null +++ b/js/tarea-clase-8.js @@ -0,0 +1,184 @@ +const $botonEnviarFormulario = document.querySelector('#enviar-carta'); + +$botonEnviarFormulario.onclick = validarFormulario; + +function validarFormulario(event) { + + event.preventDefault() + + const $nombreUsuario = document.formulario.nombre.value; + const $ciudad = document.formulario.ciudad.value; + const $descripcionRegalo = document.formulario['descripcion-regalo'].value; + + const errorNombre = validarNombre($nombreUsuario); + const errorCiudad = validarCiudad($ciudad); + const errorDescripcionRegalo = validarDescripcionRegalo($descripcionRegalo); + + const errores = { + + nombre: errorNombre, + ciudad: errorCiudad, + 'descripcion-regalo': errorDescripcionRegalo, + + }; + + const esExito = manejarErrores(errores) === 0; + + if (esExito) { + + formulario.classList.toggle("oculto"); + document.querySelector('#exito').classList.toggle("oculto"); + + setTimeout(paginaListaDeDeseos,5000); + + } + +} + +function validarNombre(nombreUsuario) { + + if (nombreUsuario.length === 0) { + + return 'El nombre no debe estar vacio'; + + } + + if (nombreUsuario.length < 2) { + + return 'El nombre debe tener al menos 2 caracteres'; + + } + + if (nombreUsuario.length >= 50) { + + return 'El nombre no debe tener mas de 50 caracteres'; + + } + + if (!/^[a-z]+$/i.test(nombreUsuario)) { + + return 'El nombre solo acepta letras'; + + } + + return "" + +} + +function validarCiudad(ciudad) { + + if (ciudad.length === 0) { + + return 'Debe elegir una ciudad'; + + } + + return "" + +} + +function validarComportamiento(comportamiento) { + + if (comportamiento.length === 0) { + + return 'Este campo no puede estar vacio'; + + } + + return "" + +} + +function validarDescripcionRegalo(descripcion) { + + if (descripcion.length === 0) { + + return 'El campo descripcion regalo no puede estar vacio'; + + } + + if (descripcion.length < 4) { + + return 'El campo descripcion regalo debe tener al menos 4 caracteres'; + + } + + if (descripcion.length >= 250) { + + return 'El campo descripcion regalo no debe tener mas de 250 caracteres'; + + } + + if (!/[a-z0-9]/i.test(descripcion)) { + + return 'El campo descripcion regalo solo acepta letras y numeros' + + } + + return "" + +} + +function manejarErrores(errores) { + + borrarErroresAnteriores(); + + let contadorErrores = 0; + const llaves = Object.keys(errores); + + llaves.forEach(function(llave) { + + const error = errores[llave] + + if (error) { + + formulario[llave].classList.add("error"); + contadorErrores++; + mostrarErrores(error); + + } else { + + formulario[llave].classList.remove("error"); + + } + + }); + + return contadorErrores; + +} + +function mostrarErrores(error) { + + const $errores = document.querySelector('#errores'); + const $error = document.createElement('li'); + + $error.classList.add("lista-errores"); + $error.textContent = error; + $errores.appendChild($error); + +} + +function borrarErroresAnteriores() { + + const $errores = document.querySelector('#errores'); + const $error = document.querySelectorAll('.lista-errores') + + $error.forEach(function(lista) { + + if ($error.length > 0) { + + $errores.removeChild(lista) + + } + + }); + +} + +function paginaListaDeDeseos() { + + alert('Serás redirigido a la lista de deseos'); + location.href = "wishlist.html"; + +}