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! 😊