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.
Validation Messages Placeholder Interpolation
We can add placeholders into our validation messages and interpolate them when displaying the messages.
For instance, we can write:
<template>
<Form @submit="onSubmit" v-slot="{ errors }">
<Field name="name" rules="between:0,10" />
<span>{{ errors.name }}</span>
</Form>
</template>
<script>
import { Form, Field, defineRule, configure } from "vee-validate";
import { between } from "@vee-validate/rules";
import { localize } from "@vee-validate/i18n";
defineRule("between", between);
configure({
generateMessage: localize("en", {
messages: {
between: "The {field} value must be between 0:{min} and 1:{max}",
},
}),
});
export default {
components: {
Form,
Field,
},
data() {
return {
validations: { size: 100 },
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
{field} , 0:{min} , and 1:{max} are the placeholders in our validation message string.
0:{min} and 1:{max} are the rule arguments.
{field} is the rule name.
Composition API
Vee-Validate 4 comes with hooks for the Composition API.
For example, we can write:
<template>
<div>
<input type="text" v-model="value" />
<span>{{ errorMessage }}</span>
</div>
</template>
<script>
import { useField } from "vee-validate";
export default {
setup() {
function validate(value) {
if (!value) {
return "This field is required";
}
if (value.length < 3) {
return "Must contain more than 3 characters";
}
return true;
}
const { value, errorMessage } = useField("fieldName", validate);
return {
value,
errorMessage,
};
},
};
</script>
We call the useField function with the field name as the first argument.
And the 2nd argument is the function we use for validation.
Returning true means that the inputted value, which is the value parameter, is valid.
We return the form validation error message if it’s not valid.
useField returns the errorMessage that we display in the template.
We can also use the yup library for validation.
For instance, we can write:
<template>
<div>
<input type="text" v-model="value" />
<span>{{ errorMessage }}</span>
</div>
</template>
<script>
import { useField } from "vee-validate";
import * as yup from "yup";
export default {
setup() {
const { value, errorMessage } = useField(
"fieldName",
yup.string().required().min(3)
);
return {
value,
errorMessage,
};
},
};
</script>
to make sure that the entered value has at least 3 characters.
We can also use global validators.
For example, we can write:
<template>
<div>
<input type="text" v-model="value" />
<span>{{ errorMessage }}</span>
</div>
</template>
<script>
import { defineRule, useField } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default {
setup() {
const { value, errorMessage } = useField("fieldName", "required|min:3");
return {
value,
errorMessage,
};
},
};
</script>
to add the rule with the built-in validators.
We have to call defineRule to add the rules first.
Conclusion
We can customize validation messages with Vee-Validate 4.
Also, we can use the hooks with the Composition API to add validation to our Vue 3 app.
