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
Hello, thank you for being here. My name is Abdurrahman Awad and I will be talking to you today about progressive validation/talks">form validation in vue.js. A little bit about me. I'm a senior front engineer at Octopods. I created and maintained 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.
We also have the DivTools plugin that we implemented recently in 4.5. So right here we have the vue.DivTools, and in the vue.DivTools you will notice a new inspector called V-Validate. So if you click on that inspector, you will notice V-Validate shows you the form as it sees it. At a glance, V-Validate 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. 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 V-Validate, which includes array fields, filled meta, localization, handling submissions, and UI library integrations. Check the documentation for these and more, and thank you.