Vee-validate: How to add a new validation rule and add add localization files

[nicolasvahidzein]

Hello Again,

i see the localization files but i want to add error messages to them but they are compacted so i have no idea of the structure. I would like to add a few rules for validation but i cannot understand the examples easily.

I need to add additional files to the existing language files, but is that hard to do or should i simply append inside to the original files you created? I'm just curious what happens if you push an update and i need to change my package.

And also, i'm no too familiar with rules, i would like to validate for FULL CAPS, Capitalization, no capitalization.

Is there another page where people have submitted new rules for vee validate? that would be wonderfully helpful.

Thanks again.

[logaretm]

There isn't a rule to validate for caps, fortunately you can create your own:

import { Validator } from 'vee-validate';

Validator.extend('caps', {
  validate (value) {
    return /^[A-Z]$/.test(value);
  },
  getMessage (field) {
    return `The ${field}` must only contain capitalized characters`;
  }
});

This will add your rule globally to all validators, so you only have to do it once, ideally in your app startup code or when bootstrapping it.

Now you might want to add different messages or locales to your custom rule:

import { Validator } from 'vee-validate';

const dict = {
  en: {
    messages: {
      caps: field =>  `The ${field}` must only contain capitalized characters`;
    }
  },
  fr: {
    messages: {
      caps: field =>  "Can't speak french sadly.";
    }
  }
};

Validator.updateDictionary(dict);

You can take a look at the messages file

or also the locale files to learn more about the structure.

[nicolasvahidzein]

ok for the first part, but the second part is messy for me.

I have understood the structure of the locale files thanks to you so can you tell me how i can add the message in those and pull it from there in your example above?

I would add this to the locale file at the end:

url:function(e){return"The "+e+" is not a valid URL."},
caps:function(e){return"The "+e+" is in all caps."}

[logaretm]

The example I gave above is suitable for runtime, if you prefer to have a locale file that includes all your messages, you can copy the locale you want from the repo, add your rules messages like you mentioned and import it in the app.

import myLocale from './myLocale';
import { Validator } from 'vee-validate';

Validator.addLocale(myLocale);

It would be better if you use the unbuilt locale files as a boilerplate files for readability.

[nicolasvahidzein]

Ok so i did what you said, by extending it like so:

Validator.extend('caps3', {
    validate (value) {
        return /^([A-Z]+)$/.test(value)
    }
})

added caps3 at the bottom of all the unbuilt files from the repo inside the module locale files

url: (field) => `The ${field} is not a valid URL.`,
caps3: (field) => `The ${field} must only contain capitalized characters.`

but i am getting an error, how do i configure the extend statement to look for the error message inside the loaded language files and not inside the function?

[nicolasvahidzein]

I didn't follow all the example to the end, by adding it to the files and leaving the constructor like you instructed it worked!!!!!!!!!!!!!!!!!!!!!!!! Thank you so much, people like you make the internet and the world amazing. Such a nice module. Thank you a thousand times.