Vue Form Validations with Vest

Rate this content
Bookmark

Forms on the web have always been with us, yet it still feels like you always have to fight them to make validation work as you planned - and even with the significant improvements modern day libraries and frameworks give us, maintenance is mostly a hassle.

Vest is a new breed of form validations framework. It draws its syntax and style from Unit Testing frameworks like mocha or Jest (hence the name), which brings the elegance and declarative nature of these frameworks to the world of form validation, greatly reducing the overhead it takes to write, maintain and reuse validations in your JS apps.

Evyatar Alush
Evyatar Alush
21 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

VEST is a form validation framework inspired by unit testing libraries. It provides a structured approach to form validation, making maintenance and reuse easier. VEST supports multiple validations per field, warning validations, interdependent field validation, async validations, and memoization. It is lightweight and can be integrated with various frameworks and libraries. The speaker is open to collaboration and contributions for adding a reactive interface using VUE's reactivity model.

1. Introduction to VEST and the Motivation Behind It

Short description:

I'm Aviatar, a front-end engineer at Facebook and the author of VEST, a form validation framework inspired by unit testing libraries. Today, I'll show you how VEST can improve form validations in Vue apps. Before diving into VEST, let me explain the motivation behind it. Previously, I struggled with the lack of structure when adding validations to forms. This made maintenance and reuse difficult. Inspired by unit tests, I developed a structure for form validation that allows for easy description of desired behavior and flexibility for different features. Let's explore this structure with an example validating the username field.

Hey! I'm Aviatar. I'm a front-end engineer at Facebook, and I'm the author of VEST. VEST is a form validation framework inspired by unit testing libraries like Mocha or Jest. So, if you've done even a little unit testing in your career, I think you'll feel very much at home working with VEST.

Today, I want to show you how we can use VEST to improve the way we write form validations in our Vue apps. But before I start speaking about VEST itself, I want to mention a little the motivation behind VEST and what led me to write VEST to begin with.

In my experience writing forms and building forms before using VEST, I had a big problem of lacking structure. So, I was trying to add validations to the form, and I wasn't sure where I should put the validation logic. Should I put them inside a change handlers? Should I put them somewhere in my feature in a shared library? How do I write it? How do I avoid it being too specific to my feature? And there is no specific structure that the validations should follow.

So I ended up making it work by writing it somewhere between my handlers and my feature. But then when I wanted to make changes and maintain the feature, like adding more fields in the feature, or making fields dependent on one another or even removing a field, it was very, very hard because everything was tied down to the feature. And because everything is very specific to the feature, it was very hard as well to make use of it again. So to take it and use it in a different form or a different feature, like the password field in both reset password and sign in.

So all these led me to think of a solution. And a couple of years back when I was working with a previous employer, we just started writing unit tests for our apps. And I saw that patterns that unit tests have, that we have that testing suite with describes and expect. And it looked very similar to the way I was thinking about form validation in my mind. Because unit tests are declarative by nature, so you are able to describe exactly what you want to happen. And along with that, they are very good at expressing what's there compared to how it should be. So you put a function in a test, and the same goes for form validation.

So I want my values, my data, to run through some tests. And it all seems very relevant to the world of form validation. Of course, it's not exactly the same, and the terminology is different, and we don't run unit tests in production. But with some design adjustments, I was able to come up with something that's still very similar to the way we write unit tests, and still be very relevant for form validation. And the structure I came up with is this. We first create a suite that's separate from our feature code, and add a callback to it. Inside the callback, we add our tests, similar to unit test tests, with an extra field or an extra parameter, which is the name of the field that we're validating. So in this case we have test, and we're testing that username. And then we have the error that the user will get in case of a validation failure. So username must be at least three characters.

2. Using VEST with a Real Live Vue App

Short description:

Inside the callback of that test, we have our assertions. I want to show you how it works with a real live Vue app. This is our app, a basic app without any validation yet. I added input components for styling, class names for error, warning, and success, props for errors and warnings, a loading spinner, and an empty validate function. Let's create our suite and import create from vest.

And inside the callback of that test, we have our assertions. So similar to assert or expect, we enforce the data.username is longer than two, or whatever validation we have there. And I want to show you how it works with a real live Vue app.

Just note, I'm using here, the options API, but it could work with the composition API just as well. No changes whatsoever to the best code.

So this is our app. It's a very basic app without any validation at all yet. And I added some input components that are there just for styling. I added a few class names. So I added a class name for error. It turns it red. Let me just refresh. Okay, it turns it red. I added a class name for warning. That turns it orange and one for success. That turns it green. And along with that, I also added a few props. So one for errors. And it takes an array of strings. And when displayed, it shows the error on the field. And same for warnings. I also added a loading spinner, because we're going to do some async validations later down the line. So loading true. And we're going to see a spinner. So that's all we have already here. We also have the validate function, which is empty. It takes the name and the value from the field that we're validating. And let's create our suite. So source. And let's import create from vest.

QnA

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

Everything Beyond State Management in Stores with Pinia
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.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
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!
Utilising Rust from Vue with WebAssembly
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: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Local State and Server Cache: Finding a Balance
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

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
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
Daniel Roe
Daniel Roe
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.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- 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
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
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.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
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.
A Different Vue into Web Performance
Vue.js London Live 2021Vue.js London Live 2021
72 min
A Different Vue into Web Performance
Workshop
Abhijeet Prasad
Abhijeet Prasad
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.