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.
Global Validators
We can define our own validation rules ith the defineRule method.
For example, we can use it by writing:
<template>
<Form @submit="onSubmit">
<Field name="name" as="input" rules="required" />
<ErrorMessage name="name" />
<br />
<Field name="email" as="input" rules="required|email" />
<ErrorMessage name="email" />
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage, defineRule } from "vee-validate";
defineRule("required", (value) => {
if (!value || !value.length) {
return "This field is required";
}
return true;
});
defineRule("email", (value) => {
if (!value || !value.length) {
return true;
}
if (!/[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/.test(value)) {
return "This field must be a valid email";
}
return true;
});
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We call the defineRule method with the rule name.
The 2nd argument is the function we use to validate our form field.
value has the inputted value.
And we return true if the value is valid.
Otherwise, we return an error message string.
The rules prop of the Field component has the validation rules.
We combine multiple rules with the pipe.
Configuring Global Validators
We can also pass in arguments to our rules to configure it.
For example, we can write:
<template>
<Form @submit="onSubmit">
<Field name="name" as="input" rules="minLength:8" />
<ErrorMessage name="name" />
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage, defineRule } from "vee-validate";
defineRule("minLength", (value, [limit]) => {
if (!value || !value.length) {
return true;
}
if (value.length < limit) {
return `This field must be at least ${limit} characters`;
}
return true;
});
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We defined the minLength rule with the limit variable destructured from the array.
And then we can check against that for validation.
We set the limit variable by adding the value after the colon in the rules prop.
Multiple rules with parameters can be combined by writing:
<template>
<Form @submit="onSubmit">
<Field name="name" as="input" rules="required|minLength:8" />
<ErrorMessage name="name" />
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage, defineRule } from "vee-validate";
defineRule("required", (value) => {
if (!value || !value.length) {
return "This field is required";
}
return true;
});
defineRule("minLength", (value, [limit]) => {
if (!value || !value.length) {
return true;
}
if (value.length < limit) {
return `This field must be at least ${limit} characters`;
}
return true;
});
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
Conclusion
We can create global validators for form fields and apply them with Vee-Validate 4 in our Vue 3 app.
