Vee-validate: Q: Custom methods and messages when using i18n

[echodrome]

Versions

• vee-validate: 2.1.0-beta6
• vue: 2.5.2

Hello, I was trying to follow the documentation here: https://baianat.github.io/vee-validate/guide/localization.html

I am unable to figure how to replace the message thrown by _required_ and at the same time merge my own custom messages.

So far this is what I have done but it is awful and will not work with dynamically generated fields:

https://codesandbox.io/s/pkoo113447

Is there a way I could add a method to validaton.js such as:

required: () => 'This field is required.' 

Or any other to fix this?

Thank you

[nicokoenig]

I'm not absolutely sure if I understand your issue.

Let me show you my approach to merge my custom rule messages with the existing messages of vee-validate.

// require vee-validate messages for current locale
const veeValidateLocale = require(`vee-validate/dist/locale/${defaultLocale}`);

// get my i18n messages for the current locale and take my own validation messages
const i18nMessages = require(`./${defaultLocale}`).default.validations.messages;

// merge them together (note: custom messages will overwrite default messages)
const mergedMessages = { ...veeValidateLocale.messages, ...i18nMessages };

// set the locale and the messages for vee-validate
Validator.localize(defaultLocale, {
  messages: mergedMessages,
  attributes: veeValidateLocale.attributes,
});

Is this somehow helpful? If not, it would be helpful if you could explain your problem in more detail.

Cheers,
Nico

[echodrome]

Hey Nico,

Thank you for your reply. I guess I am confused as to how I would merge custom messages and changing the default messages.

Currently required is defined as:

required: (field) => `The ${field} field is required.`,

I would like it to be:

required: (field) => `This field is required.`,

Then on a fieldset of radio buttons I would like to override the message with something like 'Please choose at least one option".

for the latter the only way I found was to use:

en: {
  custom:  {
    my_radio: {
      required: 'Please choose at least one option'
    }
  }
}

I hope this helps clarify

[nicokoenig]

I guess you would like to change default messages in general.

In our application, we use vue-i18n and store custom messages there. We use lazy loading for the i18n locale files and the vee-validate locale files.

Once the user changes the language, we load the i18n locale file and the vee-validate locale file, merge them together.

Here is a quick example.

// Your custom messages
const yourMessages = { 
  required: 'Hey, this field is required!'
};

// Get vee-validates messages for locale 'en'
const veeValidateMessages = require('vee-validate/dist/locale/en');

// Merge them together
// Note: It is important to pass your messages as the second argument
const mergedMessages = { ...veeValidateMessages, ...yourMessages };

// Delete initial messages for locale 'en'
delete Validator.dictionary.container.en

// Set merges messages for locale 'en'
Validator.localize('en', { 
  messages: mergedMessages, 
  attributes: veeValidateMessages.attributes
});

Please let me know if this helps?

@logaretm is my example too complicated or do I miss something in the dictionary api?

Cheers,
Nico

[nicokoenig]

I just had a second look and found another solution:

You can use Validator.dictionary.merge to merge your messages, the only thing you need to keep in mind is the format of your messages object.

const yourMessages = {
  en: {
    messages: {
      required: 'Your custom message'
    }
  }
}

Validator.dictionary.merge(yourMessages);

I guess that's missing in the docs - I will create a PR for that 👍

[nicokoenig]

Okay, there is even a more simple approach.

You can simply do this:

const customMessages = {
  en: {
    messages: {
      required: 'Yo, this field is required!'
    }
  }
}

// For initial setup and assuming you imported Validator from `vee-validate`
Validator.localize(customMessages);

// Inside a component
this.$validator.localize(customMessages);

This is also described in the docs, so no need for a PR 😄

[echodrome]

Thanks @nicokoenig for all your examples and explanations, I finally got it working. Posting here in case anyone else is interested. This is what I have in my main.js file, maybe I have something wrong here:

import VeeValidate, {Validator} from 'vee-validate';
import en from 'vee-validate/dist/locale/en';
import fr from 'vee-validate/dist/locale/fr';
import messages from '@/i18n/validation';

const customMessages = {
  en: {
    messages: {
      required: 'This field is required'
    }
  }
};

Validator.localize('fr', fr);
Validator.localize('en', en);
Validator.localize(customMessages);
Validator.dictionary.merge(messages);

Vue.use(VeeValidate, {fieldsBagName: 'formFields', inject: false});

My validation.js contains:

const messages = {
    en: {
      custom: {
        perm_street_address: {
          modified: "Please check the street address field and modify."
        },
        dc_agree: {
          required: "You must agree to the declaration of consent in order to submit this form."
        }
      }
    },
    fr: {
      custom: {
        perm_street_address: {
          modified: "Veuillez vérifier le champ Adresse et le modifier."
        },
        dc_agree: {
          required: "Vous devez accepter l'énoncé de Déclaration et consentement pour pouvoir soumettre le formulaire."
        }
      }
    }
};

export default messages;

[logaretm]

Sorry for the late response, like @nicokoenig pointed out the dictionary API allows you to do all of these things, I think the docs could be revisited to make things clearer about the localization.

Thanks @nicokoenig for keeping an eye out and responding for these issues, much appreciated!

[binsoktheara]

Hello brother and sister.
Please help me one issue.

Validator.localize(defaultLocale, {
messages: mergedMessages,
attributes: veeValidateLocale.attributes,
});
i put code like this it work. but my problem is mergedMessages the same lang like en or zh are the same message because i translate from server side but when change to another lang that not en it correct but when i change to en message not correct it get default message from vee validator so can all brother and sister help me for this issue?