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.
Field Level Validation
We can validate fields with the Field component.
For instance, we can write:
<template>
<Form v-slot="{ errors }">
<Field name="field" as="input" :rules="isRequired" />
<br />
<span>{{ errors.field }}</span>
</Form>
</template>
<script>
import { Field, Form } from "vee-validate";
export default {
components: {
Field,
Form,
},
methods: {
isRequired(value) {
return value ? true : "This field is required";
},
},
};
</script>
We have the Field component which has the as prop to set the tag name of the element to render.
rules has the field validation function.
The isRequired function returns true if the value is valid and a validation error message otherwise.
value has what we inputted.
We can also use 3rd party libraries for validation.
For example, we can use the yup library for validation by writing:
<template>
<Form v-slot="{ errors }">
<Field name="field" as="input" :rules="passwordRules" />
<br />
<span>{{ errors.field }}</span>
</Form>
</template>
<script>
import { Field, Form } from "vee-validate";
import * as yup from "yup";
export default {
components: {
Field,
Form,
},
data() {
return {
passwordRules: yup.string().required().min(8),
};
},
};
</script>
We have the passwordRules reactive property which is set to yup.string().required().min(8) to validate that our inputted value is a string with a minimum of 8 characters.
Form-Level Validation
We can also add form level validation with Vee-Validate 4.
For instance, we can write:
<template>
<Form @submit="submit" :validation-schema="simpleSchema" v-slot="{ errors }">
<Field name="email" as="input" />
<span>{{ errors.email }}</span>
<br />
<Field name="password" as="input" type="password" />
<span>{{ errors.password }}</span>
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Field, Form } from "vee-validate";
export default {
components: {
Field,
Form,
},
data() {
const simpleSchema = {
email(value) {
return /S+@S+.S+/.test(value) ? true : "email is not valid";
},
password(value) {
return value || "password is required";
},
};
return {
simpleSchema,
};
},
methods: {
submit() {},
},
};
</script>
We set the validation-schema to the simpleSchema object which has the validation functions for each field we want to validate.
The function names in simpleSchema should match the value of the name prop of the Field component.
Validation Schemas with Yup
We can add validation schemas with yup .
To do this, we write:
<template>
<Form @submit="submit" :validation-schema="schema" v-slot="{ errors }">
<Field name="email" as="input" />
<span>{{ errors.email }}</span>
<br />
<Field name="password" as="input" type="password" />
<span>{{ errors.password }}</span>
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Field, Form } from "vee-validate";
import * as yup from "yup";
export default {
components: {
Field,
Form,
},
data() {
const schema = yup.object().shape({
email: yup.string().required().email(),
password: yup.string().required().min(8),
});
return {
schema,
};
},
methods: {
submit() {},
},
};
</script>
We create the schema object with the email and password properties, which match the name attribute values on the Field component.
We call the yup.object.shape method to create the schema with the email and password fields to do the validation for each field.
Conclusion
We can use the Yup library with Vee-Validate to validate our form fields.
