Playground - Válida el formulario

Cursos Empresas Blog Live Conf Precios

Contenido del curso

¡Te damos la bienvenida a este reto!

1
¡Bienvenido al mundo de JavaScript!
01:33 min

Día 1

Día 2

Día 3

Día 4

Día 5 - Checkpoint

20
Playground - encuentra el palindromo más grande

Día 6

Día 7

Día 8

Día 9

Día 10 - Checkpoint

Día 11

Día 12

Día 13

Día 14

Día 15 - Checkpoint

50
Playground - Sistema de reservaciones de un hotel

Día 16

Día 17

Día 18

Día 19

Día 20 - Checkpoint

65
Playground - Agenda de vuelos

Día 21

Día 22

Día 23

Día 24 - Checkpoint

77
Playground - Crea un task manager con patrones de diseño

Día 25

Día 26

Día 27

Día 28

Día 29

Día 30

93
¡Lo lograste!
01:41 min

Live Class

Tomar examen

Playground - Válida el formulario

Comentarios

Benjamin Rodriguez

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}`)

}

Juan Pablo

Estudiante

Que significa "!!" en el if (!!missingData.length) ?

Benjamin Rodriguez

Estudiante

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.

Bryan Ochoa

Estudiante

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}`;
}```

Rahiber Paradas

Estudiante

Saludos bochoatrillo, tengo una duda con tu código y me preguntaba si puedes aclararla, en la función registerUser de donde sale newUser?

Andres Eduardo Maneiro Antunez

Estudiante

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

Gilberto Espinoza Maciel

Estudiante

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}`
}

Andres Eduardo Maneiro Antunez

Estudiante

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

Luis Gomero

Estudiante

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}`;
}

Ulises Serrano Pérez

Estudiante

   ANTISPOILER   

. . . . . . . . . Mi solución:

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)}`;
  }
}

David Higuera

Estudiante

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}`
}

Luis Gomero

Estudiante

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}`;

Frandel Corporan Rodríguez

Estudiante

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}`)
  }
}

Gabriel Luna

Estudiante

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}`)

}>

Laura Cecilia Arciniega Roque

Estudiante

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}`
    }
  }
}

Leonardo de los angeles Espinoza Hernandez

Estudiante

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

Amauri Guillén

Estudiante

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}`

}

Ylich Orsini

Estudiante

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}!`
  }
}

Andrés Soret Chacin

Estudiante

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}`;
}

Andre Huaman Yovera

Estudiante

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}`;
}

Andres Felipe Torres

Estudiante

🛡️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');

  }

}

Julio Bastidas

Estudiante

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}`;

}

Francisco Javier Solis Martinez

Estudiante

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}`

}

Harrison Steve Pinzón Neira

Estudiante

Solución :D

David Ochoa

Estudiante

🛡️🛡️🛡️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}`;
}

Angel Ramírez

Estudiante

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}`;
 }
}

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex