Form Validation in a Vue 3 App with Vee-Validate 4 — Validation Messages

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Localized Messages

We can add validation messages for different locales with the @vee-validate/i18n package.

To install it, we run:

yarn add @vee-validate/i18n

or:

npm install @vee-validate/i18n

to install the package.

Then we can use it by writing:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="name" rules="required" />
    <span>{{ errors.name }}</span>
  </Form>
</template>

<script>
import { Form, Field, defineRule, configure } from "vee-validate";
import { required } from "@vee-validate/rules";
import { localize } from "@vee-validate/i18n";

defineRule("required", required);

configure({
  generateMessage: localize("en", {
    messages: {
      required: "This field is required",
    },
  }),
});

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { size: 100 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We call defineRule to add the required rule.

Then we call configure with an object with the generateMessage property.

We call localize with the locale string and the messages to add the English language message for the required rule.

Also, we can add messages for multiple locales using the localize function:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="name" rules="required" />
    <span>{{ errors.name }}</span>
  </Form>
</template>

<script>
import { Form, Field, defineRule, configure } from "vee-validate";
import { required } from "@vee-validate/rules";
import { localize, setLocale } from "@vee-validate/i18n";

defineRule("required", required);

configure({
  generateMessage: localize({
    en: {
      messages: {
        required: "This field is required",
      },
    },
    fr: {
      messages: {
        required: "Ce champ est requis",
      },
    },
  }),
});

setLocale("fr");

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { size: 100 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

We add an object with the locale names as the keys and the messages inside it.

Then we call setLocale to set the locale.

We have the required property with the message for each property to set the message for the required rule.

Now the French validation error messages will be shown.

Also, we can add built-in messages for the rules.

For instance, we can write:

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="name" rules="required" />
    <span>{{ errors.name }}</span>
  </Form>
</template>

<script>
import { Form, Field, defineRule, configure } from "vee-validate";
import { required } from "@vee-validate/rules";
import { localize, setLocale } from "@vee-validate/i18n";
import en from "@vee-validate/i18n/dist/locale/en.json";
import fr from "@vee-validate/i18n/dist/locale/fr.json";

defineRule("required", required);

configure({
  generateMessage: localize({
    en,
    fr,
  }),
});

setLocale("fr");

export default {
  components: {
    Form,
    Field,
  },
  data() {
    return {
      validations: { size: 100 },
    };
  },
  methods: {
    onSubmit(values) {
      alert(JSON.stringify(values, null, 2));
    },
  },
};
</script>

to import the validation messages provided by Vee-Validate 4.

Then we pass them into the object we pass into the localize function.

Conclusion

We can add custom validation messages with Vee-Validate 4 in our Vue 3 app.