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.