Vue.js form validation vee-validate library

Form validation is a critical aspect of web development, ensuring that user input adheres to specified rules before submission. Vue.js, a popular JavaScript framework, offers a variety of tools to streamline this process. One powerful library for form validation in Vue.js is vee-validate. In this detailed guide, we’ll explore how to leverage vee-validate to create robust and dynamic form validations in Vue.js applications.

Introduction to Vue.js and vee-validate

Vue.js is a progressive JavaScript framework designed for building user interfaces. Its reactive nature and component-based structure make it an excellent choice for creating dynamic and interactive forms. vee-validate is a validation library specifically crafted for Vue.js, providing a set of flexible and customizable tools to handle form validation seamlessly.

Setting Up a Vue.js Project

Begin by setting up a new Vue.js project using the Vue CLI:

vue create vue-form-validation

Navigate to the project directory:

cd vue-form-validation

Install vee-validate:

npm install vee-validate@3 --save

Configuring vee-validate

Configure vee-validate to integrate with your Vue.js application. Create a new file named vee-validate.js in your project’s src directory:

// src/vee-validate.js
import Vue from 'vue';
import { ValidationProvider, ValidationObserver, extend, configure } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]);
});

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
  },
});

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

Import and use the vee-validate configuration in your main Vue.js file (main.js):

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import './vee-validate';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Creating a Form with vee-validate

Build a sample form in a new component, such as MyForm.vue:

<!-- src/components/MyForm.vue -->
<template>
  <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(submitForm)">
      <div>
        <label for="username">Username</label>
        <ValidationProvider rules="required|min:3|max:15" v-slot="{ errors }">
          <input type="text" v-model="username" name="username" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>

      <div>
        <label for="email">Email</label>
        <ValidationProvider rules="required|email" v-slot="{ errors }">
          <input type="email" v-model="email" name="email" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>

      <div>
        <label for="password">Password</label>
        <ValidationProvider rules="required|min:6" v-slot="{ errors }">
          <input type="password" v-model="password" name="password" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>

      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </ValidationObserver>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
    };
  },
  methods: {
    submitForm() {
      // Handle form submission
      console.log('Form submitted!');
    },
  },
};
</script>

<style scoped>
/* Component-specific styles here */
</style>

In this example, the ValidationProvider components are used to wrap each form input, specifying validation rules through the rules attribute. The ValidationObserver component wraps the entire form and handles the form submission.

Customizing Validation Messages

Customize validation error messages by updating the messages object in the vee-validate.js configuration file:

// src/vee-validate.js
import Vue from 'vue';
import { ValidationProvider, ValidationObserver, extend, configure } from 'vee-validate';
import * as rules from 'vee-validate/dist/rules';

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule]);
});

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
  },
  messages: {
    required: 'This field is required.',
    email: 'Please enter a valid email address.',
    // Add more custom messages as needed
  },
});

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or using composition functions

Features

• 🍞 Easy: Declarative validation that is familiar and easy to setup
• 🧘‍♀️ Flexible: Synchronous, Asynchronous, field-level or form-level validation
• ⚡️ Fast: Build faster forms faster with intuitive API and small footprint
• 🏏 Minimal: Only handles the complicated form concerns, gives you full control over everything else
• 😎 UI Agnostic: Works with native HTML elements or your favorite UI library components
• 🦾 Progressive: Works whether you use Vue.js as a progressive enhancement or in a complex setup
• ✅ Built-in Rules: Companion lib with 25+ Rules that covers most needs in most web applications
• 🌐 i18n: 45+ locales for built-in rules contributed by developers from all over the world

Getting Started

Installation

# Install with yarn
yarn add vee-validate@next

# Install with npm
npm install vee-validate@next --save

Vue version support

The main v4 version supports Vue 3.x only, for previous versions of Vue, check the following the table

Usage

vee-validate offers two styles to integrate form validation into your Vue.js apps

Declarative Components

Higher-order components are better suited for most of your cases. Register the Field and Form components and create a simple required validator:

import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

Then use the Form and Field components to render your form:

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />

  <span>{{ errors.field }}</span>
</Form>

The Field component renders an input of type text by default but you can control that

Composition API

If you want more fine grained control, you can use useField function to compose validation logic into your component:

import { useField } from 'vee-validate';

export default {
  setup() {
    // Validator function
    const isRequired = value => (value ? true : 'This field is required');
    const { value, errorMessage } = useField('field', isRequired);

    return {
      value,
      errorMessage,
    };
  },
};

Then in your template, use v-model to bind the value to your input and display the errors using errorMessage:

<input name="field" v-model="value" />
<span>{{ errorMessage }}</span>