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

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.

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.