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
Transcription
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.
VValidate at the moment is the most popular vue.js validation/talks">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-versus-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, involves declaring up your values, binding them to your inputs, and retrieving them so you can send them to an api. So this is an example of such a form. 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 its state, because this is a good practice, even though in vue 3 you no longer really have to. You have to bind its 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 V-Value tries to do here is 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 V-Validate 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 V-Validate will take care of the rest, including the retrieval of these values. So, validation/talks">form validation. This is the main reason you're probably using V-Validate. V-Validate allows you to validate your inputs by declaring rules on each of these fields, or inputs. You can use Laravel-style validation rules, like this one, which is now in its own companion package. But you have other ways to do validation. You can do javascript function validation, so 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 V-Validate also now supports validation schemas. validation schemas means you can declare a schema for the entire form, and V-Validate 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 in most of the cases you have a 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 V-Validate by swapping out the form element with the form component, and swapping out the input elements with the field component. You can also add an error message component for error display, and just by assigning the validation schema to the form, you are pretty much done. V-Validate 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 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.
