Un formulario de registro es un componente fundamental en el desarrollo de aplicaciones que requieren el acceso de un usuario. Una vez creado este componente en HTML, es necesario definir ciertos aspectos de su lógica desde JavaScript. En este post, enumeramos las 6 acciones a ejecutar sobre un formulario de registro para que tengas claros los comportamientos que debe tener este componente.
¿Qué es un formulario de registro?
Como te comentamos, un formulario de registro es un componente fundamental en aquellas aplicaciones que requieren el acceso de usuario. Este tipo de formulario nos permite crear un nuevo usuario a partir de determinadas input, que normalmente son un usuario y una contraseña. Si quieres aprender a crear este componente, te invitamos a leer nuestro post sobre crear un formulario de registro en HTML, donde creamos tres input: un usuario, una contraseña y una confirmación de contraseña.
Ahora que tienes tu componente, es el momento de definir su comportamiento desde JavaScript. Por ello, a continuación te contamos algunas acciones a ejecutar sobre un formulario de registro para que sepas por dónde empezar a programar tu JavaScript y qué comportamientos puedes delegar a HTML.
Acciones a ejecutar sobre un formulario de registro
Existen 6 acciones a ejecutar sobre un formulario de registro como el que hemos creado y todas ellas requieren la validación de los datos dentro de la etiqueta form. En este sentido, las acciones que te contaremos a continuación pueden tratarse desde el componente HTML creado o desde un controlador de JavaScript que consuma ese nodo y ejecute la lógica sobre él.
A continuación, te contamos 6 acciones a ejecutar sobre un formulario de registro que pueden programarse completamente desde el frontend de tu proyecto.
Campos obligatorios
Una de las acciones básicas es programar que los campos de tu formulario de registro sean obligatorios. Es decir, que el usuario no pueda continuar con el envío del formulario si no ha llenado los campos determinados. Para ello, usamos el atributo required de HTML, que se inserta dentro de un input para hacer que sea obligatorio. Entonces, cuando el usuario intente enviar el formulario sin llenar aquel input, verá un mensaje que le dice que este es necesario.
Deshabilitar botón
A partir de la acción anterior, podemos hacer que el botón de envío de formulario se active solamente cuando todos los campos están llenos. Para ello, usamos una mezcla entre el atributo disabled de HTML y la lógica de JavaScript. Si quieres conocer cómo ejecutar esta lógica, te recomendamos leer nuestros posts sobre escuchar cambios en un input desde JavaScript y habilitar botón al rellenar formulario en JavaScript.
Mínimo de longitud
Otra de las acciones a ejecutar sobre un formulario de registro tiene que ver con el contenido de las contraseñas. Estas pueden tener la regla de necesitar mayúsculas, símbolos o números para ser más seguras. Sin embargo, para ello deberás usar expresiones regulares. Para declarar una regla muy básica, podrías definir un mínimo de longitud con el atributo minlength de HTML.
Validar si se repiten bien las contraseñas
Una vez se ha creado la contraseña, deberás programar la lógica para que se escuche el contenido de este input y se compare con el contenido del input de validación de contraseña. Esta lógica deberá hacer que solo cuando ambas contraseñas sean iguales se podrá ejecutar la validación del formulario.
Hacer que la contraseña se vea
Otra acción posible a ejecutar sobre un formulario de registro es que la contraseña se vea cuando el usuario así lo requiera. Esta acción normalmente se acompaña de un botón sobre el input con el símbolo de un ojo.
El submit debe crear un usuario con esos datos
Entre las acciones a ejecutar sobre un formulario de registro, al final está programar que, cuando el usuario haga un submit (sea con el botón o con el enter de su teclado), se envíen estos datos a una API y se cree el usuario. Para ello, puedes crear tu propia API. Sin embargo, también lo puedes hacer con los endpoints de API generados con herramientas como sparREST, de la que puedes aprender más en nuestro post sobre cómo usar sparREST.
¿Quieres seguir aprendiendo?
Ahora que conoces estas 6 acciones a ejecutar sobre un formulario de registro, ¡es la hora de crear tus propios formularios con HTML y JavaScript! Si quieres seguir aprendiendo sobre los distintos elementos para crear en la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a desarrollar todo tipo de proyectos con lenguajes y herramientas fundamentales. ¿Quieres seguir formándote para convertirte en todo un profesional? ¡Inscríbete ya!
