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.
