Add Form Validation to a Vue 3 App with Vuelidate 2

Vuelidate 2 is a popular form validation library made for the Vue 3 apps.

In this article, we’ll look at how to add form validation to our Vue 3 app with Vuelidate 2.

Installation

To install Vuelidate 2, we run:

npm install @vuelidate/core @vuelidate/validators

with NPM.

Or we can run:

yarn add @vuelidate/core @vuelidate/validators

with Yarn.

Add Form Validation

To add form validation with Vuelidate 2 into our Vue 3 app, we write:

<template>
  <div>
    <input v-model="name" />
    <div v-for="error of v$.name.$silentErrors" :key="error.$message">
      <div>{{ error.$message }}</div>
    </div>
  </div>
  <div>
    <input v-model="contact.email" />
    <div v-for="error of v$.contact.email.$silentErrors" :key="error.$message">
      <div>{{ error.$message }}</div>
    </div>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required, email } from "@vuelidate/validators";

export default {
  name: "App",
  setup() {
    return { v$: useVuelidate() };
  },
  data() {
    return {
      name: "",
      contact: {
        email: "",
      },
    };
  },
  validations() {
    return {
      name: { required },
      contact: {
        email: { required, email },
      },
    };
  },
};
</script>

We import the useVuelidate hook, call it, and assign the returned value to thew v$ reactive property.

Then we add the name reactive property and bind it to the input with v-model .

And then in the validations method, we return an object with the name of the field and the validation rules.

We set each property in the object we return in the validations method to properties an object with the validation rules we want to set.

Then we get the errors with the $silentErrors property in each object.

error.$message has the error message of each field.

Dirty State

The $dirty state is provided by Vuelidate for each field to track if any manipulation has been done to it or not.

For instance, we can write:

<template>
  <div>
    <input v-model="name" @blur="v$.name.$touch" />
    <template v-if="v$.name.$dirty">
      <div v-for="error of v$.name.$silentErrors" :key="error.$message">
        <div>{{ error.$message }}</div>
      </div>
    </template>
  </div>
  <div>
    <input v-model="contact.email" @blur="v$.contact.email.$touch" />
    <template v-if="v$.contact.email.$dirty">
      <div
        v-for="error of v$.contact.email.$silentErrors"
        :key="error.$message"
      >
        <div>{{ error.$message }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import useVuelidate from "@vuelidate/core";
import { required, email } from "@vuelidate/validators";

export default {
  name: "App",
  setup() {
    return { v$: useVuelidate() };
  },
  data() {
    return {
      name: "",
      contact: {
        email: "",
      },
    };
  },
  validations() {
    return {
      name: { required },
      contact: {
        email: { required, email },
      },
    };
  },
};
</script>

In each input, we call the $touch method when we move focus away from the input.

This will make the $dirty property become true .

Therefore, we can use this to show validation errors when we focused on the input and then move focus away from it.

Conclusion

We can add basic form validation into our Vue 3 app with Vuelidate 2.

We can show validation errors and control when they’re shown.