30 días de JS con GNDX

Aprende a implementar una validación de formulario en JavaScript paso a paso, tal como se resolvió en una sesión de pair programming del reto de treinta días de JavaScript. Verás cómo analizar el problema, usar métodos de arrays y manejar errores de forma clara para garantizar datos consistentes y evitar correos duplicados.

¿Qué se resolvió y por qué importa en JavaScript?

Se implementó la función validateForm que recibe dos parámetros: formData (datos del formulario) y registeredUsers (usuarios ya registrados). La lógica cubre cuatro puntos clave:

• Verificar campos requeridos: name, last name, email y password.
• Lanzar un error con los campos faltantes si hay vacíos.
• Detectar si el email ya existe en la lista de usuarios.
• Agregar el nuevo usuario sin el password y retornar: «Tu registro fue exitoso, Nombre Apellido».

El enfoque resaltó la importancia del análisis antes de codificar: entender requisitos, revisar la vista, inspeccionar datos y usar herramientas como console.log, linter o incluso ChatGPT para acelerar el diagnóstico.

¿Cómo validar formularios con arrays y objetos en JavaScript?

La solución aprovechó métodos de arrays como every, filter, some y find, además de estructuras de datos como FormData y utilidades como Object.keys para comprender el objeto recibido. Se recalcó que no se pedía validar el formato del correo con regex, solo la presencia de campos y la unicidad del email.

¿Cómo verificar campos requeridos con every y filter?

• Define un arreglo de requeridos: ["name", "last name", "email", "password"].
• Comprueba que todos existan en formData.
• Si faltan, arma un mensaje con los ausentes usando filter y join.

fullscreen
export function validateForm(formData, registeredUsers) {
  const requiredFields = ["name", "last name", "email", "password"];

  if (!requiredFields.every(field => formData[field])) {
    const missing = requiredFields.filter(field => !formData[field]);
    throw new Error(`Faltan los siguientes campos requeridos: ${missing.join(', ')}`);
  }

  // ... (continuación abajo)
}

Nota práctica: usar solo Object.keys(formData) te dice qué llaves existen, pero no si sus valores están vacíos. La validación debe revisar el valor de cada campo.

¿Cómo evitar emails duplicados con some o find?

• Recorre la lista de usuarios para comparar el email entrante.
• Lanza un error si ya existe.

fullscreen
  const existsUser = registeredUsers.some(user => user.email === formData.email);
  if (existsUser) {
    throw new Error(`El usuario con el email ${formData.email} ya existe`);
  }

¿Cómo guardar el usuario sin exponer el password?

• Inserta solo name, last name y email.
• Devuelve un mensaje de éxito personalizado.

fullscreen
  registeredUsers.push({
    name: formData.name,
    "last name": formData["last name"],
    email: formData.email,
  });

  return `Tu registro fue exitoso, ${formData.name} ${formData["last name"]}`;
}

¿Qué habilidades y buenas prácticas se reforzaron?

Se enfatizaron hábitos que marcan la diferencia en el día a día:

• Análisis del problema antes del código. Entender entradas, salidas y reglas.
• Descomposición en pasos pequeños. Requeridos, duplicados y almacenamiento por separado.
• Depuración con console.log. Validar estructuras y valores reales.
• Manejo de errores claro. Mensajes específicos con campos faltantes.
• Métodos de arrays en contexto.
  • every: confirma que todos los requeridos están presentes.
  • filter: identifica campos faltantes para el mensaje.
  • some/find: detecta emails duplicados.
  • join: formatea el listado de faltantes.
• Criterio sobre llaves vs. valores. Object.keys solo revela llaves; hay que validar contenido.
• Colaboración y comunidad. Pair programming y retroalimentación en Discord.
• Apoyo en herramientas. Linter, ChatGPT, búsquedas técnicas y extensiones como Code Spell Check/Checker para evitar typos.

¿Te gustaría compartir cómo validarías contraseñas o aplicarías una regex para email si el requerimiento lo pidiera? Cuéntalo en los comentarios y suma tu propia versión del reto.