Form Validation in Vue 3 with Vuelidate and PrimeVue using Composition API
Tags: vue, vuelidate, primevue, composition
Published: 2023-09-24 17:53:01

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:

```bash
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:

```bash
vue create vue3-vuelidate-primevue-form-validation
```

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

```bash
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.

```vue
<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:

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

---