CODEWITHSUNDEEP
javascriptvue.jsvuejs2vee-validate
Thiago Benine
Thiago Benine

Reputation: 105

How to customize “required” error messages for ValidationProvider using a dictionary on VeeValidate (Vue.Js)

I would like to change the error message when my component MyInput with "cpf" rule isn't filled (in other words, when a component with "cpf" rule didn't satisfy the "required" rule).

I think that the "dictionary method" with custom messages should do the work, but I couldn't make it work.

With the code below, the error message displayed is "O campo cpf é obrigatório". I would like to display the message in the dictionary dict below ("Favor preencher o cpf"). I think the dictionary isn't been considered for some reason

In my main.js, I have the following code:

import Vue from 'vue';
import App from './App.vue';
import './core/extensions';

new Vue({
  render: h => h(App),
}).$mount('#app');

And on extensions.js:

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: 'Favor preencher o cpf',
        },
      }
    },
  };

Vue.use(VeeValidate);

Validator.localize({ pt_BR: dict })

Validator.extend('cpf', (val) => {
     return false //just to test
});

App.vue (simple example):

<template>
    <div id="app">
     <ValidationObserver ref="observer">
         <ValidationProvider ref="cpfinput" rules="cpf" name="CPF">
            <myInput
              slot-scope="{ errors }"
              :errorProp="errors"
              name="cpf"
            />
          </ValidationProvider>
      </ValidationObserver>    
    </div>
</template>

I'm using vee-validate 2.1.5 and vue 2.5.17

Upvotes: 0

Views: 697

Answers (1)

Sovalina
Sovalina

Reputation: 5609

Pass your dictionary like this, it should work:

const dict = {
  messages: ptBR.messages,
  pt_BR: {
    custom: {
      cpf: {
        required: 'Favor preencher o cpf',
      },
    }
  },
};
Vue.use(VeeValidate, {
  locale: 'pt_BR',
  dictionary: dict
});

Upvotes: 1

Related Questions