I am trying to update the error message that appears when an input field with the "cpf" rule is left empty (meaning it does not meet the "required" rule).
I believe using the "dictionary method" with custom messages is the solution, but I am struggling to implement it successfully.
The current issue I am facing is that despite having the code set up as shown below, the error message being displayed is still the default pt_br message for "required" fields. My goal is to show the specific message from the dictionary dict stated as "Please fill in the cpf".
In my main.js file, this is the code I have:
import Vue from 'vue';
import App from './App.vue';
import './core/extensions';
new Vue({
render: h => h(App),
}).$mount('#app');
And in the extensions.js file:
import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import ptBR from 'vee-validate/dist/locale/pt_BR';
const dict = {
messages: ptBR.messages,
pt_BR: {
custom: {
cpf: {
required: 'Please fill in the cpf',
},
}
},
};
Vue.use(VeeValidate);
Validator.localize({ pt_BR: dict })
Validator.extend('cpf', (val) => {
return false //just to test
});
Here's a simple example of App.vue:
<template>
<div id="app">
<input type="text" v-validate="required|cpf">
</div>
</template>
I am currently using vee-validate 2.1.5 and vue 2.5.17