Category: Vue 3

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.

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 Resets

We can reset the form by adding a button with the type attribute set to reset .

For example, we can write:

<template>
  <Form :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="Submit">Submit</button>
    <button type="reset">Reset</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>

When we click the Reset button, the form fields will clear.

Also, we can call the handleReset method from the slot props to do the same thing:

<template>
  <Form v-slot="{ handleReset }" :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="handleReset">Reset</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>

Resetting Forms After Submit

We can also reset forms after submission.

For example, we can write:

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="submit">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,
    };
  },
  methods: {
    onSubmit(values, { resetForm }) {
      console.log(values);
      resetForm();
    },
  },
};
</script>

We call the resetForm method in the submit handler to clear the form fields.

The resetForm method optionally takes an object with the values to reset to.

For instance, we can write:

<template>
  <Form @submit="onSubmit" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

    <button type="submit">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,
    };
  },
  methods: {
    onSubmit(values, { resetForm }) {
      console.log(values);
      resetForm({
        values: {
          email: "example@example.com",
          password: "",
        },
      });
    },
  },
};
</script>

to call resetForm with an object. The values property has an object with the form field names and corresponding values set.

We can also call resetForm from the form’s ref:

<template>
  <Form @submit="onSubmit" :validation-schema="schema" ref="form">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

<button type="submit">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,
    };
  },
  methods: {
    onSubmit(values, { resetForm }) {
      console.log(values);
      this.$refs.form.resetForm();
    },
  },
};
</script>

Conclusion

We can reset forms with the resetForm method in our Vue 3 app with Vee-Validate 4. It can be accessed in various ways.

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 Values

We can set the initial values of the form with the initial-values prop.

To do this, we write:

<template>
  <Form :validation-schema="schema" :initial-values="formValues">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="text" />
    <Field name="password" as="input" type="password" />

<button type="Submit">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),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

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

We set the initial-values prop with the object with the values.

Setting Form Values

We can set form values using the setFieldValue or setValues methods.

For example, we can write:

<template>
  <Form v-slot="{ setFieldValue, setValues }">
    <Field name="email" as="input" />
    <ErrorMessage name="email" />

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

    <button type="button" @click="setFieldValue('email', 'test')">
      Set Values
    </button>
    <button
      type="button"
      @click="setValues({ email: 'test', password: 'test12' })"
    >
      Set Multiple Values
    </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),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

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

We have one button that calls setFieldValue to set a single form value.

The first argument is the form field name and the 2nd argument is the value.

The setValues method lets us pass in an object with the form field names as the keys and their corresponding value.

Also, we can use these methods in the submit callback.

For example, we can write:

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

    <Field name="password" as="input" />
    <ErrorMessage name="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),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

    return {
      schema,
      formValues,
    };
  },
  methods: {
    onSubmit(values, actions) {
      actions.setFieldValue("email", "abc@example.com");
      actions.setValues({
        email: "abc@example.com",
        password: "password1",
      });
    },
  },
};
</script>

We call setFieldValue in the onSubmit submit handler to set a single form value.

And we call actions.setValues to set multiple values.

values has the original values before calling these methods.

Form validation will be triggered when calling these methods.

We can also call these methods from the ref of the form:

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

    <Field name="password" as="input" />
    <ErrorMessage name="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),
    });

    const formValues = {
      email: "example@example.com",
      name: "Jane Smith",
      password: "password",
    };

    return {
      schema,
      formValues,
    };
  },
  methods: {
    onSubmit(values, actions) {
      this.$refs.myForm.setFieldValue("email", "abc@example.com");
      this.$refs.myForm.setValues({
        email: "abc@example.com",
        password: "password1",
      });
    },
  },
};
</script>

Conclusion

We can set the initial values of the form with the initial-values prop.

And we can change the form values with dedicated methods with Vee-Validate 4.

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.

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.

ErrorMessage Component

We can use the ErrorMessage component to display error messages.

For example, we can write:

<template>
  <Form>
    <Field name="field" as="input" :rules="rules" />
    <ErrorMessage name="field" />
  </Form>
</template>

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

export default {
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    const rules = yup.string().required();

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

We add the ErrorMessage component and set the name prop to the value of the name prop of the Field component to display the validation error messages for the field.

Custom Labels with Yup

We can change the label of the field.

For example, we can write:

<template>
  <Form :validation-schema="schema">
    <Field name="emailAddr" as="input" />
    <ErrorMessage name="emailAddr" />

    <Field name="accPassword" as="input" />
    <ErrorMessage name="accPassword" />
  </Form>
</template>

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

export default {
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    const schema = yup.object().shape({
      emailAddr: yup.string().email().required().label("Email Address"),
      accPassword: yup.string().min(5).required().label("Your Password"),
    });
    return {
      schema,
    };
  },
};
</script>

We call the label method to change the field label.

And when we see the validation error message, we’ll see the field labels display in the error messages.

Form Values

We can get the form values from the slot props of the Form component.

For example, we can write:

<template>
  <Form v-slot="{ values }" :validation-schema="schema">
    <Field name="email" as="input" />
    <Field name="name" as="input" type="email" />
    <Field name="password" as="input" type="password" />

    <pre>
      {{ values }}
    </pre>
  </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>

The values property from the slot props has the form values.

So when we type into them, we’ll see the values displayed.

To access the form values in the component object, we can access them from the parameter of the submit handler:

<template>
  <Form @submit="onSubmit" :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,
    };
  },
  methods: {
    onSubmit(values) {
      console.log(values);
    },
  },
};
</script>

We add the submit event handler.

Then in the submit event handler, we can access the form values from the values parameter.

When we click submit and the inputted values are all valid, then the onSubmit method will be run.

Conclusion

We can display error messages with the ErrorMessage component.

Also, we can display form values from the slot props and get the form values in the submit handler.