Enhancing Your Vue 3 Application with Vuelidate 2 Validation
Written on
Chapter 1: Introduction to Vuelidate 2
Vuelidate 2 is a widely-used library designed for validating forms in Vue 3 applications. This article will guide you through the process of integrating form validation into your Vue 3 application using Vuelidate 2.
Installation Process
To set up Vuelidate 2, you can use either NPM or Yarn. Run the following command to install it via NPM:
npm install @vuelidate/core @vuelidate/validators
Alternatively, if you're using Yarn, execute:
yarn add @vuelidate/core @vuelidate/validators
Implementing Form Validation
To incorporate form validation into your Vue 3 application with Vuelidate 2, you can structure your code as follows:
<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>
In this code snippet, we import the useVuelidate hook and invoke it, assigning the resulting value to the v$ reactive property. The name property is linked to the input field using v-model, and the validations are defined in the validations method.
Managing Error Messages
To retrieve error messages for each field, use the $silentErrors property. Each error message can be accessed via error.$message.
Understanding the $dirty State
Vuelidate provides a $dirty state for each input field, allowing you to track whether it has been interacted with. To demonstrate this, consider the following implementation:
<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 this example, we invoke the $touch method when the input loses focus, which marks the input as dirty, enabling the validation errors to be displayed.
Conclusion
In summary, integrating basic form validation into your Vue 3 application using Vuelidate 2 is straightforward. You can effectively manage and display validation errors based on user interaction.
Chapter 2: Video Tutorials
To further enhance your understanding of form validation using Vuelidate, check out the following video tutorials:
The first video, Easy Form Validation With Vuelidate | Vue 3, explains the essentials of form validation using Vuelidate in Vue 3.
The second video, VueJs Form Validation with Vuelidate | Diligent Dev, provides additional insights and practical examples for implementing Vuelidate in your projects.