Getting Started with Form Validation with Vuelidate

Vue.js doesn’t come with any form validation capabilities by default.

Therefore, we need to add our own form validation library or with our own code.

In this article, we’ll look at how to get started with adding form validation with Vuelidate.

Getting started

We can install the package by running:

npm install vuelidate --save

Then in main.js , we add:

import Vue from "vue";
import App from "./App.vue";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

to add the Vuelidate plugin.

Alternatively, we can also write:

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

to add the validationMixin from Vuelidate globally.

We can also require the packages with:

const { validationMixin, default: Vuelidate } = require('vuelidate')
const { required, minLength } = require('vuelidate/lib/validators')

Now we can use validation with our code.

For example, we can write:

<template>
  <div id="app">
    <div :class="{ 'form-group--error': $v.name.$error }">
      <label>Name</label>
      <input v-model.trim="$v.name.$model">
      <div v-if="!$v.name.required">Field is required</div>
      <div
        v-if="!$v.name.minLength"
      >Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
    </div>

<div :class="{ 'error': $v.age.$error }">
      <label>Age</label>
      <input v-model.trim.lazy="$v.age.$model">
      <div
        class="error"
        v-if="!$v.age.between"
      >Must be between {{$v.age.$params.between.min}} and {{$v.age.$params.between.max}}</div>
    </div>
  </div>
</template>

<script>
import { required, minLength, between } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      name: "",
      age: 0
    };
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  }
};
</script>

to add our validation with Vuelidate.

We access everything we need with the $v variable since we registered the plugin.

Then the errors can be accessed with the $v.age and $v.name properties.

between has the between validation state.

If it’s truthy, then it’s valid.

Likewise, we have the required and minLength properties with those validation states.

We added the validations with the name and age properties to set the validation rules.

To make the validation work, we’ve to set the v-model directive to the correct value.

$v.name.$model is the model for the name state.

And $v.age.model is the model for the age state.

The $error property has the errors.

Without v-model

We can use Vuelidate without setting v-model to the values provided by Vuelidate.

To do that, we add extra methods to set the values:

<template>
  <div id="app">
    <div :class="{ 'form-group--error': $v.name.$error }">
      <label>Name</label>
      <input v-model.trim="name" @input="setName($event.target.value)">
      <div v-if="!$v.name.required">Field is required</div>
      <div
        v-if="!$v.name.minLength"
      >Name must have at least {{$v.name.$params.minLength.min}} letters.</div>
    </div>

<div :class="{ 'error': $v.age.$error }">
      <label>Age</label>
      <input v-model.trim="age" @input="setAge($event.target.value)">
      <div
        class="error"
        v-if="!$v.age.between"
      >Must be between {{$v.age.$params.between.min}} and {{$v.age.$params.between.max}}</div>
    </div>
  </div>
</template>

<script>
import { required, minLength, between } from "vuelidate/lib/validators";

export default {
  name: "App",
  data() {
    return {
      name: "",
      age: 0
    };
  },
  validations: {
    name: {
      required,
      minLength: minLength(4)
    },
    age: {
      between: between(20, 30)
    }
  },
  methods: {
    setName(value) {
      this.name = value;
      this.$v.name.$touch();
    },
    setAge(value) {
      this.age = value;
      this.$v.age.$touch();
    }
  }
};
</script>

We set the v-model to the name and age states.

And we added the setName and setAge methods to set those values to the name and age states.

And we call $touch to trigger the validation.

Conclusion

We can add basic form validation capabilities to a Vue app with Vuelidate.