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

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.

Initial Errors

We can initialize the form with error messages.

For example, we can write:

<template>
  <Form :initial-errors="initialErrors" :validation-schema="schema">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />
    <br />

    <Field name="name" as="input" type="text" />
    <br />

    <Field name="password" as="input" type="password" />
    <ErrorMessage name="password" />
    <br />

    <button type="submit">Submit</button>
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
      initialErrors: {
        email: "This email is already taken",
        password: "The password is too short",
      },
    };
  },
};
</script>

We set the initial-errors prop to the initialErrors reactive property.

It has the field names and the corresponding error messages.

Then we display them with the ErrorMessage component.

This is handy for displaying error messages retrieved from the server-side.

Setting Errors Manually

We can also set errors manually with Vee-Validate 4.

We can set the error message for one field with the setFieldError method.

And we can set error message for more than one field with the setErrors method.

For example, we can write:

<template>
  <Form v-slot="{ setFieldError, setErrors }">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />
    <br />

    <Field name="password" as="input" />
    <ErrorMessage name="password" />
    <br />

    <button type="button" @click="setFieldError('email', 'nope')">
      Set Single Error
    </button>
    <button
      type="button"
      @click="setErrors({ email: 'nope', password: 'wrong' })"
    >
      Set Multiple Errors
    </button>
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
};
</script>

to access the setFieldError and setError methods from the slot props of the Form component.

Then we call them in the click handlers of the buttons.

setFieldError takes the form field name and error message as the arguments.

And setErrors takes an object with the form field names as the keys and the error messages as the corresponding values respectively.

We can call the same methods in the submit handler.

To do this, we write:

<template>
  <Form @submit="onSubmit">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />
    <br />

    <Field name="password" as="input" />
    <ErrorMessage name="password" />
    <br />

<input type="submit" />
  </Form>
</template>

<script>
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";

export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const schema = yup.object().shape({
      email: yup.string().required().email(),
      name: yup.string().required(),
      password: yup.string().required().min(8),
    });

    return {
      schema,
    };
  },
  methods: {
    onSubmit(values, actions) {
      actions.setFieldError("email", "this email is already taken");
      actions.setErrors({
        email: "this field is already taken",
        password: "someone already has this password",
      });
    },
  },
};
</script>

We call the same methods from the actions parameter of the onSubmit submit handler.

Conclusion

We can set form validation error messages manually in our Vue 3 app with Vee-Validate 4.