Formulario de Registro

Quiero Codear

Los formularios los encontramos en todas la páginas y aplicaciones web. Son la manera más fácil de obtener información de nuestros usuarios.

Algunos formularios son tan simples como pedir un email para ser suscritos a un newsletter. Otros pueden involucrar subir varios archivos, utilizar la cámara para subir un selfie o tienen lógica basada en las opciones anteriores.

No importa el tipo de formulario, todos tienen que tener 3 cosas:

  1. La manera de obtener la información en el formato correcto - Fecha, número, texto.
  2. Mostrar si la información es requerida.
  3. Validación de información ingresada con mensaje de error detallado.

Este proyecto se puede hacer sin utilizar un Framework pero te dejamos algunas recomendaciones.

Opciones populares:

  • Angular
  • ReactJs
  • Svelte
  • VueJs

Para que este proyecto se considere finalizado, deberás completar las siguientes tareas:

  • Crear un formulario que pida la siguiente información:
    • Nombre completo
    • País
    • Dirección
    • Email
    • Contraseña
  • Los campos Nombre Completo, Email y Contraseña son requeridos.
  • El campo de País debe ser un Select que tenga todos los países hispanohablantes.
  • El campo de Contraseña no debe mostrar la información ingresada (mostrar los * ).
  • El campo de Email debe ser un email válido - utilizar Regex para validar esto.
  • El campo de Contraseña debe de tener 1 letra en mayúscula, dos números y 1 uno de estos 4 símbolos (#$%*) para ser válido.
  • Si hay un error en el formulario dar feedback visual al usuario.
  • Mostrar una alerta al completar el formulario correctamente.

Bonus

Si quieres llevar este pequeño proyecto al siguiente nivel, puedes utilizar el Google Places API para buscar y llenar la información de la dirección del usuario.

Empezar

  1. Haremos un fork del repositorio a tu cuenta de GitHub
  2. Clona el repositorio en tu computadora
  3. El README.md contiene las metas del proyecto o ayuda para completarlo.
  4. ¡Codealo!

Cuando hayas completado el proyecto ingresa a tu perfil para subir tu solución. Obten feedback de la comunidad.

Preguntas Frecuentes

Mantente al día