Validación Progresiva de Formularios en Vue.js

Rate this content
Bookmark

Los formularios pueden ser difíciles en el frontend. Ya sean simples o complejos, comparten puntos problemáticos comunes como el seguimiento de valores, las interacciones del usuario, la validación y el envío. Veremos cómo vee-validate te ayuda a abordar esos problemas y cómo aplicar mejoras progresivas a tus formularios y componentes de entrada.

9 min
21 Oct, 2021

Video Summary and Transcription

vValidate es una popular biblioteca de validación de formularios en Vue.js que resuelve los principales puntos problemáticos en la construcción de formularios. Ofrece una API progresiva y sigue un enfoque de diseño basado en la composición. vValidate te permite validar entradas declarando reglas en cada campo y admite las reglas de validación de Laravel, funciones de JavaScript y bibliotecas de terceros. También admite esquemas de validación para todo el formulario. El complemento de herramientas de diferencias en vValidate proporciona un inspector para la validez del formulario, los valores actuales y los errores.

Available in English

1. Introducción a vValidate y Problemas con los Formularios

Short description:

Hola, gracias por estar aquí. Hoy hablaré sobre la validación progresiva de formularios en Vue.js y vValidate, la biblioteca de validación de formularios más popular de Vue.js. vValidate resuelve los principales problemas en la construcción de formularios, ofrece una API progresiva y sigue un enfoque de diseño basado en la composición. Uno de los principales problemas es el seguimiento de valores, que implica declarar, vincular y recuperar valores. vValidate reduce la fricción al proporcionar un único punto de declaración y crear automáticamente el estado requerido para la funcionalidad del formulario.

Hola, gracias por estar aquí. Mi nombre es Abdurrahman Awad y hoy les hablaré sobre la validación progresiva de formularios en Vue.js. Un poco sobre mí, soy un ingeniero senior de front-end en Octoboots. Creé y mantengo vValidate desde 2016. Escribo sobre Vue.js en mi blog logarithm.com. Así que si están buscando ese tipo de contenido, échenle un vistazo.

Los formularios son difíciles, pero ¿qué los hace así? Hay algunos puntos problemáticos que siempre encontramos al construir nuestros formularios. Primero, está el seguimiento de valores. El seguimiento de valores generalmente implica declarar los valores, rastrearlos o manejar los cambios y almacenarlos para su posterior uso, como enviarlos a una API o lo que sea. También tenemos desafíos con la validación, como la validación síncrona, la validación asíncrona y la validación a nivel de formulario, validación a nivel de campo. Los mensajes de error también pueden tener sus propios desafíos, como la localización. También está la interfaz de usuario y la experiencia de usuario. También está la organización. ¿Cómo vas a organizar tus grandes formularios o múltiples formularios? También está la depuración de la experiencia del desarrollador, que puede que ni siquiera exista en la solución que estás usando actualmente. Entonces, todos estos aspectos son abordados de alguna manera por vValidate, pero primero hablemos un poco sobre ello.

En este momento, vValidate es la biblioteca de validación de formularios de Vue.js más popular, con aproximadamente 1.4 millones de descargas al mes y 8.6 estrellas en GitHub. Los objetivos de vValidate son resolver estos principales problemas. También ofrecer una API progresiva que se ajuste a la ideología de Vue.js de ser un framework progresivo de JavaScript , lo que significa que admite a usuarios que solo usan JavaScript como una capa de mejora para sus aplicaciones existentes y a usuarios que usan JavaScript para hacer todo en sus aplicaciones, como renderizar toda la aplicación en aplicaciones de una sola página. También está el enfoque de diseño basado en la composición como objetivo, lo que significa que puedes componer la lógica de validación e integrarla en tus propios componentes u otros componentes de terceros, lo cual no era posible antes sin la API de composición. Así que hablemos del primer punto problemático importante, el seguimiento de valores, el seguimiento de valores, como dije, implica declarar tus valores, vincularlos a tus entradas y recuperarlos para poder enviarlos de una API a otra. Lo siento. Este es un ejemplo de dicho formulario. El problema con esto es que hay demasiada fricción entre estas tres áreas. Cuando introduces un nuevo campo, siempre tienes que declarar su estado, porque esto es una buena práctica, aunque en Vue 3 ya no es realmente necesario, tienes que vincular el estado y tienes que recuperar su valor. Y si olvidas hacer alguna de estas cosas, tu formulario funcionará incorrectamente, lo cual puede ser muy difícil de depurar. Así que lo que intentaremos hacer aquí es también intentaremos resolver el problema del seguimiento de valores reduciendo la fricción a un único punto de declaración. Ya sea que declares todo en la plantilla o declares todo en el script o una combinación de ambos. Lo que vValidate hace aquí por ti en este ejemplo es que creará el estado requerido para que este formulario funcione sin que tú tengas que hacerlo. Todo lo que tienes que hacer es declarar el formulario y los campos, y vValidate se encargará del resto, incluida la recuperación de estos valores.

2. Validación de Formularios y Mejora Progresiva

Short description:

vValidate te permite validar las entradas declarando reglas en cada campo. Admite las reglas de validación de Laravel, funciones de JavaScript y bibliotecas de terceros como validator.js. vValidate también admite esquemas de validación, lo que te permite declarar un esquema para todo el formulario. Con vValidate, puedes mejorar los formularios agregando validación del lado del cliente sin mucho JavaScript. El complemento de herramientas de diferencias en vValidate proporciona un inspector que muestra la validez del formulario, los valores actuales y los errores. Te permite realizar acciones como borrar el formulario y forzar la validación.

Entonces, Validación de Formularios. Esta es la razón principal por la que estás utilizando correctamente vValidate. vValidate te permite validar tus entradas declarando reglas en cada uno de estos campos o entradas. Puedes usar reglas de validación al estilo de Laravel como esta, que ahora está en su propio paquete complementario. Pero tienes otras formas de hacer validación. Puedes usar funciones normales de JavaScript o puedes usar cualquier biblioteca de validación de terceros como validator.js.

En este ejemplo estamos usando Yelp, que es una herramienta de validación de front-end muy popular. Pero lo que realmente destaca de ella es su forma de expresar esquemas de formularios. Así que vValidate ahora también admite esquemas de validación. Los esquemas de validación significan que puedes declarar un esquema para todo el formulario y vValidate validará los campos correctamente. Y asignará los mensajes de error correspondientes. Yelp es realmente bueno aquí y te permite declarar tus esquemas de forma muy declarativa en tu JavaScript.

Hablemos de la parte de mejora progresiva. Aquí tenemos un ejemplo de un formulario muy básico. Es un formulario nativo que envía la acción de registro, por lo que hará una recarga completa de la página y enviará estos campos al punto final de registro. Digamos que tienes esto en algún tipo de framework de backend como Laravel o Rails y en la mayoría de los casos tienes una configuración similar a esta, pero digamos que solo quieres agregar un poco de JavaScript, solo quieres agregar validación del lado del cliente y quieres evitar la presentación para ese campo sin hacer demasiado JavaScript. Puedes hacer eso con vValidate reemplazando el elemento del formulario con el componente de formulario y reemplazando los elementos de entrada con el componente de campo. También puedes agregar un componente de mensaje de error para mostrar los errores y simplemente asignando el esquema de validación al formulario, ya casi has terminado. vValidate entenderá que no estás escuchando el evento de envío, por lo que no estás intentando secuestrar el envío. Eso significa que solo obedecerá el comportamiento predeterminado si el formulario es válido. Entonces, si el usuario intenta enviar y todo es válido, actuará como si no hubiera ningún tipo de JavaScript aquí. Pero si hay errores, evitará el envío, dándote exactamente lo que necesitas.

También tenemos el complemento de herramientas de diferencias que implementamos recientemente en la versión 4.5. Aquí tenemos las herramientas de diferencias de vista y en las herramientas de diferencias de vista notarás un nuevo inspector llamado vValidate. Si haces clic en ese inspector, vValidate te mostrará el formulario tal como lo ve. De un vistazo, vValidate te muestra la validez de los campos, por lo que si comienzo a completar algunos campos aquí, comenzarán a iluminarse en verde. Y eso te da una muy buena idea de qué es válido y qué no lo es. También aquí a la derecha puedes ver una captura de pantalla del formulario, puedes ver sus valores actuales, cualquier error si los hay, por lo que si elimino este verás el error aquí, y todo tipo de información que desees. Además, si haces clic en los campos, verás un resumen similar del estado, y puedes realizar algunas acciones aquí, como borrar todo el formulario, y también puedes forzar su validación. Puedes borrar un solo campo y también puedes forzar su validación.

Eso es todo para esta charla, hay mucho más que puedes hacer con vValidate, que incluye campos de matriz, meta llenada, localización, manejo de envíos e integraciones con bibliotecas de UI. Consulta la documentación para obtener más información sobre esto y ¡gracias!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Workshop
Solving your front-end performance problems can be hard, but identifying where you have performance problems in the first place can be even harder. In this workshop, Abhijeet Prasad, software engineer at Sentry.io, dives deep into UX research, browser performance APIs, and developer tools to help show you the reasons why your Vue applications may be slow. He'll help answer questions like, "What does it mean to have a fast website?" and "How do I know if my performance problem is really a problem?". By walking through different example apps, you'll be able to learn how to use and leverage core web vitals, navigation-timing APIs, and distributed tracing to better understand your performance problems.