DEV Community

suman kumar
suman kumar

Posted on

24

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm install @vuelidate/core @vuelidate/validators
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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


Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)