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.
Getting Started with Script Tag
We can get started with the script tag.
We use the v-form component as the form container.
The v-field component is our input field.
error-message component is our error message.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vee-validate@next"></script>
</head>
<body>
<div id="app">
<v-form @submit="onSubmit">
<v-field
name="name"
as="input"
type="text"
placeholder="What's your name?"
:rules="isRequired"
></v-field>
<br />
<error-message name="name"></error-message>
<br />
<button>Submit</button>
</v-form>
</div>
<script>
const app = Vue.createApp({
components: {
VForm: VeeValidate.Form,
VField: VeeValidate.Field,
ErrorMessage: VeeValidate.ErrorMessage
},
methods: {
isRequired(value) {
if (!value) {
return "this field is required";
}
return true;
},
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
}
}
});
app.mount("#app");
</script>
</body>
</html>
First, we add the script tag with:
<script src="https://unpkg.com/vee-validate@next"></script>
Then we register the VForm , VField , and ErrorMessage components so we can use them in our template.
We have the isRequired method which we use for the rule for the form by passing it into the rules prop.
It returns true if the form field is valid.
Otherwise, it returns the error message we want to display.
value has the value that we entered.
The v-field component has the as prop which is set to input to render it as an input box.
The error-message has the name which would match the value of the name attribute of the field that we’re validating.
Getting Started with NPM Package
We can install the Vee-Validate NPM package by running:
yarn add vee-validate@next
or
npm i vee-validate@next --save
Then we can use it by writing:
<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 register the Field and Form components so we can use them in our template.
Form is the form wrapper. It has the errors property from the slot props with the error message.
The Field component is like the v-field component we have in the previous example.
errors.field has the validation form validation error message of the 'field' field.
isRequired function has the same validation logic as the previous example.
It returns true if value is valid and an error validation message otherwise.
Conclusion
We can add simple form validation into our Vue 3 app with Vee-Validate 4.
