web-dev-qa-db-fra.com

Comment changer les messages d'erreur par défaut de Vee-Validate?

En utilisant Vue.js et Vee-Validate, comment puis-je changer les messages d'erreur par défaut?

Démos d'exemples Vee-Validate

Hors de la boîte, pour le message requis, il affichera, "Le champ < fieldname > est obligatoire." Mais je veux juste que tous les champs requis affichent "Obligatoire" à la place. Je sais que je peux remplacer des champs individuels mais je veux juste remplacer globalement tout champ qui affiche une erreur requise pour afficher "Obligatoire".

javascriptvue.jsvee-validate
5
RichC

Jetez un œil à Messages personnalisés spécifiques au champ dans la documentation officielle.

Vous devez essentiellement fournir un dict personnalisé pour chaque langue que vous souhaitez remplacer.

3
chrisg86

J'ai trouvé un Gist intéressant, en fait il suffit de remplacer le dictionnaire. Cela semble si facile une fois fait ...

Gist intéressant: https://Gist.github.com/ramadimasatria/1819d4da13afb2ec3c2505f88bb760af

Installer:

  1. créez un fichier js avec vos messages personnalisés et un copier-coller de la fonction formatFileSize car vous ne pouvez pas l'importer depuis vee-validate.

Dans mon projet, dans standard-messages/messages.fr.js (copié à partir de fr.js trouvé sur https://github.com/baianat/vee-validate/tree/4738e09c5397a951b9b986a4ce23e248bedcd295/locale ):

const formatFileSize = size => {
  const units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const threshold = 1024
  size = Number(size) * threshold
  const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold))
  return `${(size / Math.pow(threshold, i)).toFixed(2) * 1} ${units[i]}`
}

export default {
  _default: field => `${field} n'est pas valide.`,
  [...]
}
  1. Maintenant, dans la configuration de votre validateur, vos messages personnalisés remplaceront les messages par défaut:

Ma validation/index.js:

import Vue from 'vue'
import VeeValidate from 'vee-validate'
import { messages as frOriginalMessages } from 'vee-validate/dist/locale/fr'
import { messages as nlOriginalMessages } from 'vee-validate/dist/locale/nl'
import { messages as deOriginalMessages } from 'vee-validate/dist/locale/de'
import frAttributes from './attributes/attributes.fr.json'
import nlAttributes from './attributes/attributes.nl.json'
import deAttributes from './attributes/attributes.de.json'
import validators from './validators'
import frCustomStandardMessages from './standard-messages/messages.fr.js'

export default {
  configure(currentLocale) {
    Vue.use(VeeValidate, {
      inject: false,
      locale: currentLocale,
      dictionary: {
        fr: { messages: { ...frOriginalMessages, ...frCustomStandardMessages }, 
attributes: frAttributes },
        nl: { messages: { ...nlOriginalMessages}, attributes: 
nlAttributes },
        de: { messages: { ...deOriginalMessages}, attributes: 
deAttributes }
      }
    })
0
barbara.post