1
I believe the validator is using cpf
as a field name rather than a validation rule in this case.
Iβm not clear on why the cpf
rule should trigger the required
rule, but if you give the input a name
or data-vv-name
attribute like:
<input type="text" data-vv-name="cpf" v-validate="required">
and pass the following arguments to localize
:
Validator.localize('pt_BR', {
custom: {
cpf: {
required: 'Favor preencher o cpf'
}
}
})
That will display your localized message when the field is empty.
Hereβs an example of a field specific error message (replace βenβ with βpt_BRβ as needed)
VeeValidate.Validator.localize('en', {
custom: {
cpf: {
required: 'Favor preencher o cpf'
}
}
})
Vue.use(VeeValidate)
new Vue({
el: '#app'
})
p {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vee-validate@latest"></script>
<div id="app">
<input type="text" data-vv-name="cpf" v-validate="'required'">
<p>{{ errors.first('cpf') }}</p>
</div>
0
I got the easy way of vee-validate to customize error messages:
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: {
fields: {
Item: {
required: "Please enter some title",
// alpha: "please enter alphabets only"
}
}
}
});
localize("en");
-2
Have a look at Field-specific Custom Messages in the official documentation.
You basically have to provide a custom dict for each language you want to override.