Contenido del curso
Playground - Válida el formulario
Benjamin Rodriguez
Estudiante
Juan Pablo
EstudianteBenjamin Rodriguez
Estudiante
Bryan Ochoa
Estudiante
Rahiber Paradas
Estudiante
Andres Eduardo Maneiro Antunez
Estudiante
Gilberto Espinoza Maciel
EstudianteAndres Eduardo Maneiro Antunez
Estudiante
Luis Gomero
Estudiante
Ulises Serrano Pérez
Estudiante
David Higuera
EstudianteLuis Gomero
Estudiante
Frandel Corporan Rodríguez
Estudiante
Gabriel Luna
Estudiante
Laura Cecilia Arciniega Roque
Estudiante
Leonardo de los angeles Espinoza Hernandez
Estudiante
Amauri Guillén
Estudiante
Ylich Orsini
Estudiante
Andrés Soret Chacin
Estudiante
Andre Huaman Yovera
Estudiante
Andres Felipe Torres
Estudiante
Julio Bastidas
Estudiante
Francisco Javier Solis Martinez
Estudiante
Harrison Steve Pinzón Neira
Estudiante
David Ochoa
EstudianteAngel Ramírez
Estudiante🛡️Escudo anti-spoilers🛡️
Mi solucion es la siguiente:
export function validateForm(formData, registeredUsers) { //Datos requeridos const requiredData = ["name", "lastname", "email", "password"] //Encontrar que datos faltan const missingData = requiredData.filter(x => !Object.keys(formData).includes(x)) //Mensaje de error si faltan datos if (!!missingData.length) throw new Error(`Faltan los siguientes campos: ${missingData.join(", ")}`); //Extraer los valores necesarios de formData const { name, lastname, email } = formData //Comprobar si ya esta registrado ese email if (registeredUsers.some(x => x.email == email)) throw new Error(`Email ya existe: ${email}`); //Agregar el registro registeredUsers.push({ name, lastname, email }) //Retorno return (`Tu registro fue exitoso ${name} ${lastname}`) }
Que significa "!!" en el if (!!missingData.length) ?
Es una practica para asegurarme que !!missingData.length sea booleano.
missingData.length = 0; !missingData.length; //true !!missingData.length; //false
En caso de que missingData.length sea mayor que 0, significa que hay datos que hacen falta.
Comparto mi solución usando funciones para separar las tareas de la función principal.
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 validateFormFields(formData); validateEmailExists(formData.email, registeredUsers); return registerUser(formData, registeredUsers); }
En validateFormFields se van descartando los campos que se encuentren en formData de un arreglo con los campos que debe tener (missingFields). Antes de descartar también se valida que los campos tengan contenido.
Los campos que queden son los que le faltan a formData y se lanzan con el error.
function validateFormFields(formData) { const missingFields = ['name', 'lastname', 'email', 'password']; for (const key in formData) { if (formData[key]) { const index = missingFields.findIndex(field => field == key); missingFields.splice(index, 1); } } if (missingFields.length > 0) { throw new Error(`Faltan los siguientes campos: ${missingFields.join(', ')}`); } }
En validateEmailExists se busca el email de formData en el arreglo registeredUsers. Si lo encuentra se muestra con el error.
function validateEmailExists(email, registeredUsers) { const user = registeredUsers.find(user => user.email == email); if (user) throw new Error(`Email duplicado: ${email}`); }
Por último, registerUser usa la desestructuracion de objetos para extraer el nuevo usuario sin la contraseña y agregarlo a registeredUsers.
function registerUser(formData, registeredUsers) { const { password, ...newUser } = formData; registeredUsers.push(newUser) return `Tu registro fue exitoso ${newUser.name} ${newUser.lastname}`; }```
Saludos bochoatrillo, tengo una duda con tu código y me preguntaba si puedes aclararla, en la función registerUser de donde sale newUser?
Hola Rihiber, el spread operator y la destructuracion son un poco confusos de entender al comienzo pero el newUser lo declara aqui
const { password, ...newUser } = formData;
ahi lo que esta haciendo es que esta destructurando formData, primero el valor password la agrega a la constante que esta declarando de password, y el resto de los valores los esta agregando a newUser usando el spreadOperator "...newUser"
quizas otra manera de hacer esa parte del codigo seria
delete formData.password registeredUsers.push(formData)
y seria exactamente lo mismo
Comparto mi solución por qué utilice un método que no conocía antes de este ejercicio .
. Me parece que saber que existe y tenerlo a la mano es lo que quiere ECMAScript. Usemos todas las funciones y herramientas que el propio lenguaje ya nos entrega para trabajar. . . . . .. . . . . . . . . . . . . . . . . . .
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 const required = ['name', 'lastname', 'email', 'password'] for (let i = 0; i < required.length; i++){ if (!formData.hasOwnProperty(required[i])) { throw new Error(`Falta el siguiente campo: ${required[i]}`) } } if (registeredUsers.find((user) => user.email === formData.email)) { throw new Error("El email esta duplicado") } registeredUsers.push({ name: formData.name, lastname: formData.lastname, email: formData.email }) return `Tu registro fue éxito ${formData.name} ${formData.lastname}` }
Excelente aporte, gracias por que lei esa propiedad (sin tener que spoilearme tu soluciones) pude resolverlo, me estaba matando la cabeza de como podria validarlo y que fuese algo simple, ya que solo se me ocurrian codigos muy complejos, con muchas condicionales
Adjunto mi 🦆 . . . . . . . . . . . .
export function validateForm(formData, registeredUsers) { const requiredFields = ['name', 'lastname', 'email', 'password']; const formFields = Object.keys(formData); let missingFields = requiredFields.filter((x) => !formFields.includes(x)); if (missingFields.length) { throw new Error(`Faltan los siguientes campos: ${missingFields}`); } const { name, lastname, email } = formData; const duplicatedEmail = registeredUsers.some((user) => user.email === email); if (duplicatedEmail) { throw new Error('Error email duplicado'); } registeredUsers.push({ name, lastname, email }); return `Tu registro fue exitoso ${name} ${lastname}`; }
ANTISPOILER
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 console.table(registeredUsers); let emptyProperties = ""; if (formData.name == "") { emptyProperties += "name, "; } if (formData.lastname == "") { emptyProperties += "lastname, "; } if (formData.email == "") { emptyProperties += "email, "; } if (formData.password == ""){ emptyProperties += "password, "; } if (emptyProperties == "") { const user = registeredUsers.find(user => user.email === formData.email); if (user === undefined) { delete formData.password; registeredUsers.push(formData); return `Tu registro fue existoso ${formData.name} ${formData.lastname}`; } else { throw new Error(`El email ${user.email} ya fue registrado`); } } else { return `Faltan los siguientes campos requeridos: ${emptyProperties.substring(0, emptyProperties.length - 2)}`; } }
MI SOLUCION ▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾▾
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 const props = ["name", "lastname", "email", "password"] const missingProps = [] for (let prop of props) if (!formData[prop]) missingProps.push(prop) if (missingProps.length > 0) throw new Error(`Faltan los siguientes campos: ${missingProps.join(", ")}`) const { password, ...data } = formData if (registeredUsers.some(user => user.email === formData.email)) throw new Error("El email ya existe") registeredUsers.push(data) return `Tu registro fue exitoso ${data.name} ${data.lastname}` }
Hola comunidad, Aqui va mi solucion luego de poder realizar el reto en el live.
. . . . . .
const requiredFields = ['name', 'lastname', 'email', 'password']; const formFields = []; const formDataEntries = Object.entries(formData); formDataEntries.forEach(([key, value]) => { if (value) { formFields.push(key); } }); console.log('formFields', formFields); let missingFields = requiredFields.filter((x) => !formFields.includes(x)); if (missingFields.length) { throw new Error(`Faltan los siguientes campos: ${missingFields}`); } const { name, lastname, email } = formData; const duplicatedEmail = registeredUsers.some((user) => user.email === email); if (duplicatedEmail) { throw new Error('Error email duplicado'); } registeredUsers.push({ name, lastname, email }); return `Tu registro fue exitoso ${name} ${lastname}`;
me gusto este reto 😁
export function validateForm(formData, registeredUsers) { const isAllFilled = Object.keys(formData).map(item => formData[item] != '' ? true : false) const voidFields = Object.keys(formData).filter(item => !formData[item]) const sameEmail = registeredUsers.map(item => item.email).some(item => item === formData.email) if (isAllFilled.every(item => item === true)) { if (sameEmail) { throw new Error('El email suministrado ya esta en uso') } delete formData.password registeredUsers.push(formData) return `Registro exitoso de ${formData.name} ${formData.lastname}` } else { throw new Error(`Faltan los siguientes campos: ${voidFields}`) } }
Mi solución . . . . . . . . . .
<export function validateForm(formData, registeredUsers) { //validamos todas las propiedades de formData let propiedades = ["name", "lastname", "email", "password"]; for (const propiedad in formData) { if (formData[propiedad]) { const index = propiedades.findIndex(prop => prop === propiedad); if (index >= 0) { propiedades.splice(index, 1) } } } if (propiedades.length > 0) { throw new Error(`Faltan los siguientes campos: ${propiedades.join(", ")}`); } //validamos si existe el email let exists = registeredUsers.find(user => user.email == formData.email); if (exists) { throw new Error(`Email duplicado: ${formData.email}`); } //registramos el nuevo usuario const { name, lastname, email } = formData registeredUsers.push({ name, lastname, email }) return (`Tu registro fue exitoso ${name} ${lastname}`) }>
Esta es mi solución, ya la probe y funciona pero no entiendo por que no pasa el ultimo test "Should throw an error if fields are needed" Si estoy fallando en algo, me gustaría me retroalimenten
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 let message = [] for (let item in formData) { if (formData[item] == '') { message.push(item) } } if (message.length > 0) { throw new Error("Faltan los siguientes campos: " + message.join(', ')) } else { let finded = registeredUsers.find(elem => elem.email == formData.email) if (finded ) { throw new Error("El email ya esta registrado") } else { let { name, lastname, email } = formData registeredUsers.push({ name, lastname, email }) return `Tu registro fue exitoso ${name} ${lastname}` } } }
Hola @arciniega1497
Tu solución tiene un ligero detalle, específicamente en esta parte
for (let item in formData) { if (formData[item] == '') { message.push(item) } }
Lo que hace es básicamente validar si uno o varios atributos del formulario es un string vacío, pero el ejercicio puede mandarte objetos que carezcan de propiedades
Por ejemplo
const formData = { name: "Juan", password: "123456", };
Con el anterior objeto, tu solución lo registraría porque los atributos tienen como valor un string que NO está vacío. Pero sigue careciendo de propiedades como email o lastname. Por lo que debes implementar a tu solución una instrucción que te ayude a validar que además de no estar vacíos tiene que verificar que existen.
Espero mi comentario sea de ayuda :D
Este es el código que yo use para mi solución, pero no entiendo por qué no pasa el último test si al probarlo en la Vista funciona correctamente.
export function validateForm(formData, registeredUsers) { const formValues = Object.values(formData) const formKeys = Object.keys(formData) const missingFields = [] const { name, lastname, email } = formData formValues.forEach((value, index) => { if (!value) missingFields.push(formKeys[index]) }) if (!formValues.every(value => value)) { throw new Error(`Faltan los siguientes campos: ${missingFields.join(", ")}`) } registeredUsers.forEach(user => { if (user.email === email) { throw new Error(`El correo ${email} ya existe`) } }) registeredUsers.push({ name, lastname, email }) console.log(registeredUsers) return `Tu registro fue exitoso ${name} ${lastname}` }
Yo lo solucioné de una manera que funciona y no permite el registro hasta completar todos los datos. Sin embargo, la prueba falla e indica que no está arrojando el throw, cuando faltan los datos.
¿Me pueden orientar en lo que está fallando?
export function validateForm(formData, registeredUsers) { let faltantes = [] let error = [false, false]; let errMessage = 'Faltan los siguientes campos requeridos: ' const data = Object.entries(formData); for (let i = 0; i < data.length; i++) { if (!data[i][1]) { error[0] = true faltantes.push(data[i][0]) } } registeredUsers.forEach((user) => { if (user.email === formData.email) { error[1] = true } }) if (error[0]) { throw new Error(errMessage + faltantes.join(', ')) } else if (error[1]) { throw new Error(`Error: el correo ${formData.email} ya se encuentra registrado!`) } else { registeredUsers.push({ name: formData.name, lastname: formData.lastname, email: formData.email }) return `¡Tu registro fue exitoso ${formData.name} ${formData.lastname}!` } }
My solution 👇
function validateForm(formData, registeredUsers) { const requiredData = ["name", "lastname", "email", "password"]; const missingData = requiredData.filter((data) => { return !Object.keys(formData).includes(data); }); if (missingData.length > 0) { throw new Error(`Faltan los siguientes campos: ${missingData.join(", ")}`); } const { name, lastname, email } = formData; if (registeredUsers.some((data) => data.email === email)) { throw new Error(`Email ya existe: ${email}`); } registeredUsers.push({ name, lastname, email }); return `Tu registro fue exitoso ${name} ${lastname}`; }
export function validateForm(formData, registeredUsers) { const requiredFields = ["name", "lastname", "email", "password"]; // Verificar campos requeridos const missingFields = requiredFields.filter(field => !formData[field]); if (missingFields.length > 0) { throw new Error(`Faltan los siguientes campos requeridos: ${missingFields.join(", ")}`); } // Verificar email duplicado const existingEmail = registeredUsers.find(user => user.email === formData.email); if (existingEmail) { throw new Error(`El email '${formData.email}' ya está en uso.`); } // Registro exitoso const newUser = { name: formData.name, lastname: formData.lastname, email: formData.email, }; registeredUsers.push(newUser); return `Tu registro fue exitoso ${formData.name} ${formData.lastname}`; }
🛡️Escudo anti-spoilers🛡️ Se puede mejorar bastante usando los métodos que veremos en las proximas lecciones como join e includes . . . . . . . . . . . . . .
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 const fieldNames = ['name', 'lastname', 'email', 'password']; const errorFields = 'Faltan los siguientes campos: '; checkData(formData, fieldNames); if (isEmailNew(formData.email, registeredUsers)) { throw new Error("Email duplicado"); }; return addNewUser(formData, registeredUsers); function addNewUser(userData, registeredUsers) { console.log('start addNewUser'); const userToAdd = { name: userData.name, lastname: userData.lastname, email: userData.email }; console.log('userToAdd:', userToAdd); registeredUsers.push(userToAdd); console.log('registeredUsers:', registeredUsers) console.log('end addNewUser'); return `Tu registro fue exitoso ${userData.name} ${userData.lastname}` } function isEmailNew(newEmail, registeredUsers) { console.log('start isEmailNew'); return registeredUsers.find((user) => user.email === newEmail); } function checkData(formData, fieldNames) { console.log('start checkData'); let currentFields = ''; console.log(formData); for (const field of fieldNames) { if (!formData[field]) { currentFields += field + ', '; } } console.log('error fields: ', currentFields); if (currentFields) { currentFields = currentFields.slice(0, (currentFields.length - 1)); throw new Error(errorFields + currentFields); } console.log('end checkData'); } }
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 let camposRequeridos = ["name", "lastname", "email", "password"]; let errorMsg = "Faltan los siguientes campos: "; let FaltanCampos = false; camposRequeridos.forEach(campo => { if (!formData.hasOwnProperty(campo)) { FaltanCampos = true; errorMsg += campo + ", "; } }); if (FaltanCampos) { throw new Error(errorMsg); } let usuarioRegistrado = registeredUsers.filter(user => user.email === formData.email); if (usuarioRegistrado.length > 0) { throw new Error("Email duplicado"); } registeredUsers.push({ name: formData.name, lastname: formData.lastname, email: formData.email }); return `Tu registro fue exitoso ${formData.name} ${formData.lastname}`; }
My solution: 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 const fieldsForm = ['name', 'lastname', 'email', 'password']; const currentFieldsForm = Object.keys(formData); const missingFields = fieldsForm.filter(field => { return !(currentFieldsForm.includes(field)) }) if (missingFields.length) { const missingFieldsString = missingFields.join(',') throw new Error(`Faltan los siguientes campos: ${missingFieldsString}`); } const { email } = formData; const isEmailDuplicated = registeredUsers.some(user => user.email === email); if (isEmailDuplicated) { throw new Error(`El email esta duplicado`); } const { name, lastname } = formData; registeredUsers.push({ name, lastname, email }); return `Tu registro fue exitoso ${name} ${lastname}` }
Solución :D
🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️
Callback hell usando async-await
!Spoiler Shield
export function validateForm(formData, registeredUsers) { // Tú código aquí 👈 const required = ["name", "lastname", "email", "password"]; const missingFields = []; required.forEach((field) => { if (!formData.hasOwnProperty(field)) { missingFields.push(field); } }); if (missingFields.length != 0) { throw new Error( "Faltan los siguientes campos requeridos: " + missingFields.join(", ") ); } const isDuplicated = registeredUsers.some( (ele) => ele.email == formData.email ); if (isDuplicated) { throw new Error("Email duplicado: " + formData.email); } delete formData.password; registeredUsers.push(formData); return `Tu registro fue exitoso ${formData.name} ${formData.lastname}`; }
Mi solución
function validateForm(formData, registeredUsers) { const requiereInputs = ['name', 'lastname', 'email', 'password'] const missingInputs = [] let haveAllInputs = true; requiereInputs.forEach(input => { if (formData.hasOwnProperty(input) === false) { haveAllInputs = false; missingInputs.push(input); } }) if (haveAllInputs === false) { let errorMessage = `Faltan los siguientes campos: ${missingInputs.join(', ')}`; throw new Error(errorMessage); } const isEmailRegistered = registeredUsers.some(user => user.email == formData.email); if(isEmailRegistered === true) { throw new Error(`El email ${formData.email} ya se encuentra registrado`); } else { delete formData.password; registeredUsers.push(formData); return `Tu registro fue exitoso ${formData.name} ${formData.lastname}`; } }
