1
votes

Comment personnaliser les messages d'erreur "requis" à l'aide d'un dictionnaire sur VeeValidate (Vue.Js)

Je voudrais changer le message d'erreur lorsqu'une entrée avec la règle "cpf" n'est pas remplie (en d'autres termes, lorsqu'une entrée avec la règle "cpf" ne satisfait pas la règle "obligatoire").

Je pense que la "méthode du dictionnaire" avec des messages personnalisés devrait faire le travail, mais je n'ai pas pu la faire fonctionner.

Avec le code ci-dessous, le message d'erreur affiché est juste le message pt_br par défaut pour les champs "obligatoires". Je souhaite afficher le message dans le dictionnaire dict ci-dessous (" Favor preencher o cpf ")

Dans mon main.js , j'ai le code suivant:

<template>
    <div id="app">
        <input type="text" v-validate="required|cpf">      
    </div>
</template>

Et sur 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 (exemple simple):

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

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

J'utilise vee-validate 2.1.5 et vue 2.5.17

javascript vue.js vuejs2 vee-validate

0 commentaires

3 Réponses :

0
votes

Je pense que le validateur utilise cpf comme nom de champ plutôt que comme règle de validation dans ce cas.

Je ne sais pas pourquoi la règle cpf devrait déclencher la règle obligatoire , mais si vous donnez à l'entrée un nom ou data-vv-name attribut comme:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vee-validate@latest"></script>
<div id="app">
  <input type="text" data-vv-name="cpf" v-validate="'required'">
  <p>{{ errors.first('cpf') }}</p>
</div>

et passez les arguments suivants à localize :

p {
  color:red;
}

Cela affichera votre message localisé lorsque le champ est vide.

Voici un exemple de message d'erreur spécifique au champ (remplacez «en» par «pt_BR» si nécessaire)

VeeValidate.Validator.localize('en', {
  custom: {
    cpf: {
      required: 'Favor preencher o cpf'
    }
  }
})

Vue.use(VeeValidate)

new Vue({
  el: '#app'
})

Validator.localize('pt_BR', {
  custom: {
    cpf: {
      required: 'Favor preencher o cpf'
    }
  }
})

<input type="text" data-vv-name="cpf" v-validate="required">

3 commentaires

Qu'en est-il de l'utilisation du ValidationProvider? Je l'ai nommé en utilisant data-vv-name = "cpf" et utilisé rules = "required", mais le message d'erreur affiché était "O campo {field} é obrigatório". En utilisant name = "cpf", l'erreur affichée était "O campo cpf é obrigatório". Je pense que le dictionnaire n'a pas été pris en compte pour une raison quelconque

Le fournisseur de validation et les composants d'observateur sont d'excellents ajouts à VeeValidate. Ils ont résolu un certain nombre de problèmes de validation qui nécessitaient des solutions de piratage trop complexes, notamment liées à l'injection et au cadrage. Depuis leur sortie, ils sont tout ce que j'ai utilisé.

Ravi d'entendre que le fournisseur est une bonne option! Mais je n'ai aucune idée de la raison pour laquelle le dictionnaire ne fonctionne pas

-2
votes

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

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

1 commentaires

Ce lien n'existe pas.

0
votes

J'ai l'impression que le message d'erreur personnalisé ne fonctionne pas avec le composant ValidateProvider.

0 commentaires