Formulario dinámico con javascript

El día de hoy les comparto una forma de validar formularios con javascript puro, también conocido como vanilla javascript.

La intención de este pequeño ejemplo, es mostrar que un estilo de programación orientado a las funciones dinámicas, nos provee de las siguientes ventajas:

• Ahorra tiempo a la hora de debugear y escalar el proyecto.
• Ahorra tiempo y líneas de código.
• Nos obliga a darle una estructura ordenada y legible para otros programadores.

Muy bien comencemos!!

Comenzamos con la estructura del proyecto, aunque sea pequeño, siempre es importante tener separada cada cosa en su lugar, esto nos permite reutilizar código, depurar con mayor facilidad y escalarlo de forma más rápida. Por favor nunca hagas código spaguetti!!!!!

Tenemos una carpeta para nuestros estilos css, una para nuestros scripts js y en la raíz nuestro archivo index.html

Estructura HTML

Tenemos un div principal con la clase contenedor, el cual se encargará de centrar nuestro formulario de manera vertical y horizontal.

Seguido del título y del formulario que contendrá todos los campos de entrada.

Dentro del formulario tenemos divs con la clase row-form, los cuales nos sirven como "renglones" en nuestro formulario.

Y por último, dentro de cada row-form los inputs que queremos que tenga nuestro formulario.

Haz clic aquí para añadir texto

Funcionalidad dinámica

En este proyecto estoy haciendo uso de los atributos data para poder hacer dos funcionalidades dinámicas:

1. Crear los labels automáticamente con javascript.
2. Validar todos los datos del formulario con un solo if, y no crear un if por input.

Creación de labels

Para esto, en cada input que me interesa guardar, agrego estos atributos data para poder realizarlo:

• data-label: contiene el texto que quiero que tenga el label
• data-guardar: lo coloco en true para los campos que quiero que sean obligatorios.
• data-tipo: para identificar el tipo de campo que es.

Función para crear labels.

Primero lo que hago es definir una constante con document, para no acceder directamene al dom cada vez que lo necesite, si no a la constante d.

Después obtengo todos los elementos que voy a guardar del formulario, lo hago con la función querySelectorAll a todos los elementos que tengan el atributo data-guardar.

Nos brincamos a la línea 10, a la declaración de la función.

Recorro la constante de elementos que declaré en la línea 2, con la función forEach,  y obtengo todos sus atributos data, accediendo a la propiedad dataset. Después creo el label, y por último asigno la referencia del padre del input (row-form).

Una vez declaradas estas variables, agrego la propiedar for del label, cuyo valor es el id del input, y le agrego el texto que debe mostrar. lo cual proviene del atributo data-label. 

Para el caso de los input de tipo radio, hago una excepción, ya que es un caso especial, pues es un label para todas las opciones, sin embargo necesitamos ver qué valor representa cada opción, por eso tomamos lo que contenga en su value,  en lugar de su data-label.

Por último a la variable que contiene la referencia del elemento padre, con la función prepend, añadimos el label que acabamos de crear al principio de este.

Con esto al ejecutar la función crearLabel se crearán todas las etiquetas de nuestros inputs, por eso la ejecutamos al pincipio de nuestro script (línea 8).

Validando el formulario

Declaro primero una bandera donde guardaré el estatus de la validación.

Posteriormente recorro el arreglo de los elementos que me interesa guardar del formulario y realizo lo siguiente:

• Primero evalúo si la bandera está en true, lo que significa que todos los inputs van bien hasta este punto.
• Si entra al if obtengo los atributos data del elemento y "switcheamos" el atributo data-tipo, esto porque dependiendo del elemento vamos a evaluar si está vacío o si su selección es inválida. Para los select, evaluamos que su opción seleccionada sea diferente de 0, ya que la opción con este valor, la usamos como "placeholder" para indicar que sebe seleccionar algo. Para los radio, obtenemos todos los elementos de este tipo, y comprobamos que almenos uno esté seleccionado. Y para los demás obtenemos su propiedad value y evaluamos que contenga algo.
• Si el valor de algún elemento no cumple con las condiciones que establecimos, cambiamos la bandera de la validación a false, con esto en la siguiente iteración, ya no volverá a evaluar las condiciones y se retornará su función al final de la función, para que podamos saber si cumplió o no las validaciones.
• Antes de retornar el resultado de la función preguntamos si el valor de la bandera es false, en caso de que se cumpla esta condición, informamos al usuario cuál es el campo que no cumplió con la validación, recuerda que ahora tenemos el nombre de cada campo en su atributo data-label, y le ayudamos a encontrarlo con la función focus.

Con esto, cada vez que agreguemos un nuevo campo, ya no tendremos que preocuparnos por modificar nuestra función de validación, ya que estamos obteniendo todos los elementos desde el principio. Si no lo hicieramos de esta manera, tendríamos que agregar un if por cada campo que contenga nuestro formulario, y escribir un mensaje para cada alerta, te imaginas lo que tardarías si tu formulario tuviera 100 campos o más? x.X

Por último, agregamos nuestra función al evento submit del formulario, es decir cuando hagan click al botón de enviar, va evaluar nuestro formulario, si todo está correcto, lo enviará, y si no, detendrá el envío y nos notificará donde está el error.