Vee-validate: Q: How to stop triggering the default message in Async Backend Validation with Localization?

[pmochine]

If you go to my codesandbox file and click on DynamicLocale in the folders plus visit the page as well, you will see my problem.

How can I use _my translations_ and not vee-validate's default message?

If you type [email protected] in the input box you will see the correct error message is:

[email protected] is already taken....

If you change the language, you get the default message for that language. (The ${field} value is not valid., but in the locale language)

I understand why it is like that, but it would be cool to use my own message without writing it down in the locale languages js files.

In my case, I'm loading the message via my backend.

Just in case if you want to see it:

 const isUnique = value => new Promise(async (resolve) => {

        const response = await axios.post('/api/validate/username', { name: value });

        return resolve({
            valid: response.data.valid,
            data: {
                message: response.data.message //my response is always translated to the current language, but is ignored
            }
        });

    });

    Validator.extend('unique', {
        validate: isUnique,
        getMessage: (field, params, data) => data.message
    });

[logaretm]

That will require passing a dictionary back from the response, You could do this:

Validator.extend('unique', {
  validate: isUnique,
  getMessage: (field, params, data) => data.messages[Validator.locale]
});

Your response would look like this:

{
  messages: {
    en: 'email is already taken',
    ar: 'شوف ايميل تاني'
  }
}

Let me know if this solves your issue

[pmochine]

@logaretm I feel bad but I'm not able to do it. If you have a look at my code in codesandbox
(go to DynamicLocale). You see that I added the "languages" but still I get the default error messages...

[logaretm]

I didn't test my solution either, so don't feel bad. I will try to post a working example or fix the issue soon as I do not have a lot of time, hopefully within three days.

As a workaround you can try the following:

https://codesandbox.io/s/zxlp1lzkm4

[logaretm]

VeeValidate 3.0 has been released with a lot of improvements to the messages and i18n system, you can find an example relevant to this issue here.

Also, this is the documentation for custom i18n implementations like yours: https://baianat.github.io/vee-validate/guide/localization.html#using-other-i18n-libraries