How to customize error message (field name) in VeeValidate?
I got the easy way of vee-validate to customize error messages and names:
1- first install package vee-validate using following command
npm install vee-validate --save
2- import and register the following in main.js
import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
import { ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider',ValidationProvider);
Vue.component('ValidationObserver',ValidationObserver);
3- Now move to your component and make an input field:
<ValidationObserver v-slot="{ handleSubmit }">
<form @submit.prevent="handleSubmit(additem)">
<ValidationProvider name="Item" rules="required" v-slot="{ errors }">
<div class="row">
<label>Item</label>
<textarea rows="5" id="item" data-vv-as="item1" class="form-control" v-model="item"></textarea>
<span>{{ errors[0] }}</span>
</div>
</ValidationProvider>
<div class="row mt-3">
<button class="btn btn-sm btn-primary" type="submit" >Save Item</button>
</div>
</form>
</ValidationObserver>
4- Now import localize where from you are importing ValidationProvider as following in your vue component in script tag.
import {localize} from "vee-validate/dist/vee-validate.full.esm";
localize({
en: {
names:{ Item: "ITEM FEILD", firstname: "First Name"},
fields: {
Item: {
required: "Please enter some title",
// alpha: "please enter alphabets only"
}
}
}
});
localize("en");
For VeeValidate v3 you can pass name
attribute for the ValidationProvider
<ValidationProvider name="first name" rules="required|min:2" v-slot="{ errors }">
You can use data-vv-as
which will show in the error message. Read more here.
<input type="text" name="address_line_1" data-vv-as="Address Line 1" />
EDIT: Updated documentation reference here.