[Vuejs]-How to customize "required" error messages using a dictionary on VeeValidate (Vue.Js)

I believe the validator is using cpf as a field name rather than a validation rule in this case.

I’m not clear on why the cpf rule should trigger the required rule, but if you give the input a name or data-vv-name attribute like:

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

and pass the following arguments to localize:

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

That will display your localized message when the field is empty.

Here’s an example of a field specific error message (replace ‘en’ with ‘pt_BR’ as needed)

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

Vue.use(VeeValidate)

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

p {
  color:red;
}

<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>

Brian Lee

[Vuejs]-Associate .env file with vue.config.js

I felt custom error message is not working with ValidateProvider component.

Shajith Kunnumbrath

[Vuejs]-Associate .env file with vue.config.js

I got the easy way of vee-validate to customize error messages:
1- first install package vee-validate using following command

npm install vee-validate --save

2- import and register the following in main.js

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
import { ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider',ValidationProvider);
Vue.component('ValidationObserver',ValidationObserver);

3- Now move to your component and make an input field:

 <ValidationObserver v-slot="{ handleSubmit }">
                            <form @submit.prevent="handleSubmit(additem)">
                                <ValidationProvider name="Item" rules="required" v-slot="{ errors }">
                                    <div class="row">
                                        <label>Item</label>
                                        <textarea rows="5" id="item" data-vv-as="item1"  class="form-control" v-model="item"></textarea>
                                        <span>{{ errors[0] }}</span>
                                    </div>
                                </ValidationProvider>

                                <div class="row mt-3">
                                    <button class="btn btn-sm btn-primary" type="submit" >Save Item</button>
                                </div>
                            </form>
                        </ValidationObserver>

4- Now import localize where from you are importing ValidationProvider as following
in your vue component in script tag.

import {localize} from "vee-validate/dist/vee-validate.full.esm";
localize({

    en: {
        fields: {
            Item: {
                required: "Please enter some title",
                // alpha: "please enter alphabets only"
            }
        }
    }
});
    localize("en");

usama