In a previous article, I discussed how much of a pain form creation is. Couple this with form validation and it really becomes a time sink. Luckily, there are quite a few packages Vue developers can utilize to make this process a little less painful.

In this two-part series, we’re specifically going to be looking at VueJs form validation. In particular, we’ll be looking at two of the most popular validation packages, VeeValidate and Vuelidate.

In part 1, we’ll be looking at VeeValidate. To demo each package, we’ll be looking at how we can use them in a signup form. So, let’s get to learning and coding!

VeeValidate

Installation

To install VeeValidate, open a terminal in the root of your Vue project, and run the following command:

npm install vee-validate --save

Next, we’ll register the _ValidationObserver _and _ValidationProvider _component provided by VeeValidate as a global component in our Vue project. Inside of src/main.js add the following:

import { ValidationObserver } from "vee-validate";

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);

The reason we import ValidationProvider separately is that we get the full bundle of rules without having to extend each rule. See the reasoning in their docs.

Form Validation

ValidationProvider

The way that an input gets validated is by wrapping it in the _ValidationProvider _component as such:

Validation Provider from VeeValidate Docs

You’ll see that it takes the following:

• name — To display the field name in errors. This is optional and will take the input name if specified.
• rules — The validation rules that are supplied by VeeValidate. See a full list here.
• v-slot — Where are errors will appear. See the span with errors[0].

#programming #vuejs #software-development #software-engineering #javascript #vue