Progressive Form Validation in Vue.js

Rate this content

Forms can be hard in frontend. Whether your forms are simple or complex, they share common pain points like value tracking, user interactions, validation, and submission. We will look at how vee-validate helps you address those issues, and how to apply progressive enhancements to your forms and input components.

9 min
21 Oct, 2021

Video Summary and Transcription

vValidate is a popular Vue.js form validation library that solves major pain points in form building. It offers a progressive API and follows a composition first design approach. vValidate allows you to validate inputs by declaring rules on each field and supports Laravel's validation rules, JavaScript functions, and third-party libraries. It also supports validation schemas for the entire form. The diff tools plugin in vValidate provides an inspector for form validity, current values, and errors.

Available in Español

1. Introduction to vValidate and Form Pain Points

Short description:

Hello, thank you for being here. Today, I'll talk about progressive form validation in Vue.js and vValidate, the most popular Vue.js form validation library. vValidate solves major pain points in form building, offers a progressive API, and follows a composition first design approach. One major pain point is value tracking, which involves declaring, binding, and retrieving values. vValidate reduces friction by providing a single point of declaration and automatically creating the required state for form functionality.

Hello, thank you for being here. My name is Abdurrahman Awad and I will be talking to you today about progressive form validation in Vue.js. A little bit about me, I'm a senior front-end engineer at Octoboots. I created and maintain VValidate since 2016. I write about Vue.js at my blog So, if you are looking for that type of content, check it out.

Forms are hard, but what makes them so? There are a few pain points that we always encounter when building our forms. First, you have value tracking. Value tracking usually involves declaring your values, tracking them or handling the changes and storing them for later consumption like sending them to an API or whatever. You also have challenges with validation like synchronous validation, asynchronous validation and form-level validation, field-level validation. Error messages can have its own challenges like localization. There is also UI and UX. There is also organization. How are you going to organize your large forms or multiple forms? There is also debugging the developer experience which may not be even existent in the solution that you are using right now. So all of that are in a way addressed by vValidate, but let's first talk a little bit about it.

vValidate at the moment is the most popular Vue.js form validation library with about 1.4 million downloads per month and 8.6 stars on GitHub. The goals of vValidate is to solve these major pain points. Also offering a progressive API to match the Vue.js ideology of being a progressive JavaScript framework, which means supporting users who just use JavaScript as an enhancement layer for their existing applications and users who use JavaScript to do everything in their applications like rendering the entire app like in single page applications. There is also the composition first design approach as a goal, which means you can compose the validation logic and integrate it into your own components or other third-party components, which really wasn't possible before without the composition API. So let's talk about the first major pain point, value tracking, value tracking, like I said, it involves declaring up your values, binding them to your inputs and retrieving them so you can send them from an API to an API. Sorry. So this is an example of such a forum. The problem with this is there is too much friction between these three areas. When you introduce a new field, you always have to declare it state, because this is a good practice, even though in view three you no longer really have to, you have to bind the state and you have to retrieve its value. And if you forget to do any of these things, that will make your form work incorrectly, which can be really hard to debug. So what we will try to do here is tries it also tries to solve the value tracking issue by reducing the friction to a single point of declaration. You either declare everything in the template or you declare everything in the script or a mix of both. Which means you no longer have to go around to make sure your declarations match correctly. So what vValidate does here for you in this example, is it will create the state required to get this form working without you having to do so. All you have to do is declare up the form and the fields and vValidate will take care of the rest including the retrieval of these values.

2. Form Validation and Progressive Enhancement

Short description:

vValidate allows you to validate inputs by declaring rules on each field. It supports Laravel's validation rules, JavaScript functions, and third-party libraries like validator.js. vValidate also supports validation schemas, allowing you to declare a schema for the entire form. With vValidate, you can enhance forms by adding client-side validation without much JavaScript. The diff tools plugin in vValidate provides an inspector that shows the form's validity, current values, and errors. It allows you to perform actions like clearing the form and forcing validation.

So Form Validation. This is the main reason you are properly using vValidate. vValidate allows you to validate your inputs by declaring rules on each of these fields or inputs. You can use Laravel's style validation rules like this one which is now in its own companion package. But you have other ways to do validation. You can use normal JavaScript functions or you can use any third-party validation library like validator.js.

In this example we are using Yelp which is a very popular front-end validation tool. But what's really strong about it is its way to express form schemas. So vValidate also now supports validation schemas. Validation schemas means you can declare a schema for the entire form and vValidate will be validating the fields correctly. And it will assign the error messages accordingly. Yelp is really good here and it allows you to declare your schemas in a very declarative way in your JavaScript.

Let's talk about the progressive enhancement part. Here we have an example of a very basic form. It's a native form that submits the register action so it will do a full page reload and it will submit these fields to the slash register endpoint. Let's say you have this against some kind of a backend framework like Laravel or Rails and most of the cases you have similar setup to this, but let's say you just want to add some sprinkle of JavaScript, you only want to add some client-side validation and you want to prevent submission for that field without doing too much JavaScript. So you can do that with vValidate by swapping out the form element with the form component and swapping out the input elements with the field component. You can also add error message component for error display and just by assigning the validation schema to the form, you are pretty much done. vValidate will figure out that you are not listening for the submit event so you are not trying to hijack the submission. So that means it will just obey the default behavior only if the form is valid. So if the user tries to submit and everything is valid it will act as if there isn't any kind of Javascript going on here. But if there is some errors it will prevent the submission, giving you exactly what you need.

We also have the diff tools plugin that we implemented recently in 4.5. So right here we have the view diff tools and in the view diff tools you will notice a new inspector called vValidate. If you click on that inspector you will notice vValidate shows you the form as it sees it. At a glance vValidate shows you the validity of the fields, so if i start filling out some fields right here they will start lighting up green. And that at a glance gives you a really good idea of what is valid and what is not. There is also here on the right you can see a snapshot of the form, you can see its current values, any errors if it has any, so if i remove this one you will see the error right here, and all kinds of information that you want to. There is, if you click on the fields you will see a similar summary of state, and you can do some actions here, like if you click on the form you can clear the entire thing, and you can force validate it as well. You can clear a single field and you can force validate it as well.

That's it for this talk, there are a lot more you can do with Visual.JS, which includes array fields, filled meta, localization, handling submissions, and UI library integrations.

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

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
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
- 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
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
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
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
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, 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.