#3 - Uso de una expresión regular para validar un texto en Bubble
¿Quieres evitar que alguien se ponga muy creativo al crear su nombre de usuario? Entonces te vendrá bien filtrar el texto con una expresión regular. En esta edición te explico una manera de hacerlo.
¡Hola!
Primero que nada, quería agradecerte el tiempo que te has tomado para llegar hasta aquí y prestarme unos minutos de tu tiempo.
Si te interesa el contenido en español relacionado con Bubble y el no-code, te animo a suscribirte. Y si no te interesa... Pues te dejo un GIF de un gatito para que al menos la visita haya merecido la pena 😻
Hoy voy a escribir sobre un tema muy concreto al que me tuve que enfrentar hace poco en la creación de Flogr.
Y qué es Flogr te preguntarás… o quizá no, pero bueno, te lo voy a contar igualmente. Lo siento.
Flogr es un proyecto personal que estoy haciendo en Bubble con el que básicamente estoy intentando reconstruir lo más fielmente posible el clásico Fotolog.
Puedes apuntarte en la lista de espera para probarlo y seguir su evolución en mi cuenta de Twitter @davizgarzia
Bueno, vamos al grano... El caso, que estaba yo ahí liado con los formularios y se me vino a la cabeza la siguiente pregunta. ¿Cómo hago para controlar que un input de texto no contenga caracteres especiales en Bubble?
Pues bueno, aquí viene la solución que he encontrado. Vamos por partes.
Lo primero que tienes que hacer es seleccionar o crear el input que va a pasar la validación. Añade también un bloque de texto para añadir un mensaje de error que no sea visible cuando cargue la página. Muy pronto lo tendrás que utilizar.
Encuentra o crea tu expresión regular
¿Sabes qué es una expresión regular? También se conoce como regex o regexp (del inglés regular expression) y viene a ser una secuencia de caracteres que conforma un patrón de búsqueda. Se utilizan principalmente para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones. Sí. Lo he copiado de la Wikipedia.
Pero vaya, viene a ser una "fórmula" que se utiliza para comprobar si un texto contiene o no ciertos caracteres. Puede llegar a ser un poco complicado de construir, por eso te recomiendo que busques en internet exactamente lo que quieres porque seguramente encontrarás a alguien que ya haya creado una expresión regular para tu caso de uso.
En esta web puedes aprender mucho más sobre expresiones regulares e intentar construir una. ¡Es todo un mundo a explorar!
Valida el input con la expresión regular
Para este ejemplo utilizaré la siguiente expresión regular:
[^A-Za-z0-9\_\-]
¿Qué hace esto? Pues comprueba que el texto que se introduce en el input únicamente incluya caracteres alfanuméricos, guiones altos y guiones bajos.
Bien, una vez ya hemos encontrado la expresión que se ajusta a nuestro caso, vamos a ponernos manos a la obra.
Navega a la tab de Workflow y crea un nuevo evento que se inicie cuando cambie el valor de un input.
Seleccionamos el elemento input que hemos creado y completamos el campo Only when para que se dispare solo cuando se cumpla la condición que le vamos a poner.
Utilizaremos el operador avanzado :extract with Regex sobre el valor del input. Este operador extrae y agrupa en una lista todos los caracteres que no coinciden con la expresión regular que le hemos pasado.
Por lo tanto, si el tamaño de esta lista que se genera es mayor que 0, querrá decir que hay que mostrar el error porque ha reconocido caracteres que no están permitidos.
Para ocultar el error, tan solo tienes que duplicar el evento y darle la vuelta a la condición del Only when y hacer que se oculte el mensaje.
Como los eventos que has creado se disparan cada vez que se modifica el valor del input, verás como el nombre del usuario se valida en tiempo real.
¡Y ya estaría! Como siempre digo, seguro que hay otras formas de conseguir este resultado pero esta es la solución que he encontrado yo.
¿Sabes otro modo de hacerlo? ¿Conocías las expresiones regulares? Déjame un comentario o dímelo por Twitter. Estaré encantado de leerte y aprender.
Hasta aquí lo que tenía que contar. Espero que te haya resultado interesante y que te sirva de ayuda en tus aplicaciones de Bubble.
Si es así recuerda suscribirte para recibir en tu email el próximo artículo.
Si quieres darme cualquier feedback o comentar cualquier cosa, estaré encantado de leerte. Tengo los MD de Twitter abiertos para todo el mundo.
Bueno... y como no sé muy bien cómo despedir esto, he pensado en dejar una canción que me guste al final de cada post. Porque si te he descubierto algo nuevo de Bubble, quizá también te descubra algo nuevo en Spotify 🙃
¡Hasta la próxima!