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

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.

Handling Submissions

We can submit form data directly to a given URL.

For example, we can write:

<template>
  <Form
    method="post"
    action="https://reqres.in/api/users"
    :validation-schema="schema"
  >
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />
    <input type="submit" />
  </Form>
</template>

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

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

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

We set the method to 'post' and action to the URL that we want to submit our form data to do to the submission.

It’ll only run when the inputted values are valid.

Also, we can manually handle our submissions to handle it the way we like.

For example, we can write:

<template>
  <VeeForm v-slot="{ handleSubmit }" :validation-schema="schema" as="div">
    <form @submit="handleSubmit($event, onSubmit)">
      <Field name="email" as="input" type="text" />
      <Field name="name" as="input" type="text" />
      <Field name="password" as="input" type="password" />

      <button>Submit</button>
    </form>
  </VeeForm>
</template>

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

export default {
  components: {
    VeeForm,
    Field,
  },
  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) {
      console.log(values);
    },
  },
};
</script>

We add the Form component and get the handleSubmit method from the slot prop.s

Then we can use the as the submit event handler with the submit $event object and our own onSubmit method to do the submissioins.

Then when we the fields are all valid and we click Submit, we see the data in values logged.

Also, we can use the submitForm method from the slot props to submit directly to a URL.

To do this, we write:

<template>
  <VeeForm v-slot="{ submitForm }" :validation-schema="schema" as="div">
    <form
      @submit="submitForm"
      method="post"
      action="https://reqres.in/api/users"
    >
      <Field name="email" as="input" type="text" />
      <Field name="name" as="input" type="text" />
      <Field name="password" as="input" type="password" />

      <button>Submit</button>
    </form>
  </VeeForm>
</template>

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

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

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

We set the submit event handler to the submitForm method.

And we set the method and action so we can submit our form data to that URL.

Also, we can use the validate method to validate our form inputs:

<template>
  <Form v-slot="{ validate }" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />
    <button type="button" @click="validate">Submit</button>
  </Form>
</template>

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

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

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

We also get the validate method from the slot props.

Conclusion

We can use the functions from the slot props of the Form component to validate submissions and submit data.