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.
Progressive Form Validation in Vue.js
AI Generated Video Summary
1. Introduction to vValidate and Form Pain Points
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 logarithm.com. 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.
2. Form Validation and Progressive Enhancement
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.