Form Validation in Vue 3 with Vuelidate and PrimeVue using Composition API

In this tutorial, we'll explore how to perform form validation in Vue 3 using Vuelidate and integrate it seamlessly with the popular PrimeVue UI library. We'll leverage the power of the Composition API and the script setup feature to create a clean and efficient form validation solution.

Prerequisites:

Before we get started, ensure you have the following dependencies installed:

• Vue 3
• Vuelidate
• PrimeVue
• primeFlex

You can install these using npm or yarn:

npm install vue@next @vuelidate/core primevue 

Setting Up the Project:

Let's create a new Vue 3 project and set up the necessary components. We'll use create-vue@3 for a quick setup:

vue create vue3-vuelidate-primevue-form-validation 

Once the project is created, navigate to your project folder and install Vuelidate:

npm install @vuelidate/core @vuelidate/validators 

Building the Form:

Now, let's create a simple form with a name field that should be at least 3 characters long and is required.

<template> <div class="flex justify-content-center"> <form @submit.prevent="submitForm"> <InputText v-model="name" placeholder="Enter your name" :class="{'p-invalid':$v.$error}" /> <div v-if="$v.$error" class="p-error">Name is required.</div> <div v-if="$v.$error" class="p-error">Name must be at least 3 characters.</div> <Button type="submit" class="p-button p-button-primary">Submit</Button> </form> </div> </template> 

In this code:

• We use InputText from PrimeVue for the name input field.
• We bind the p-error class to the input field when the name field is invalid.
• We conditionally display error messages based on the validation results.

Setting Up Validation:

Now, let's set up Vuelidate for form validation using the Composition API:

<script setup> import { ref, computed } from 'vue' import { useVuelidate } from '@vuelidate/core' import { required, minLength } from '@vuelidate/validators' const name = ref('') const rules =computed(() => ( { name: { required, minLength: minLength(3), }, } )); const $v = useVuelidate(rules, { name }); console.log($v); const submitForm = () => { const result = $v.value.$validate(); result.then((res) => { if(res) { alert('Form submitted.'); } }).catch((err) => { console.log(err); }) }; </script> 

Here's what's happening:

• We import Vue Composition API features like ref and computed.
• We define a name ref to store the value of the name input.
• We create validation rules using Vuelidate's required and minLength validators.
• We use $v to store the validation results and integrate it with the input fields.
• We use $v.value.$validate() to trigger the validation, and it returns a promise. -We use .then() to handle the result of the validation, and if it's successful (res is true), we display the "Form submitted." alert.
• If there's an error during validation, we catch it using .catch() and log the error.

Conclusion:

In this tutorial, we've demonstrated how to perform form validation in Vue 3 using Vuelidate, along with the powerful PrimeVue UI library. With the Composition API and script setup, we've created a clean and efficient solution for form validation.

This approach allows you to easily handle form validation in Vue.js projects, making your code more maintainable and user-friendly.

Feel free to explore further and adapt this example to your specific project needs. Happy coding! 😊