custom validation message in vee-validate

Question

I am using Laravel - 5.8 with Vue.js. My question is about how to show a custom error message for a rule in the Vee-Validate library. My custom message for the "required" rule is not showing, and instead it reads: "The first_name field is required." The expected message is "Please enter first name."

Below code is in app.js

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';

This is my HTML component code.

<template>    
    <div>
        <form role="form">
            <ValidationProvider name="first_name" :rules="required">
                <div slot-scope="{ errors }">
                    <input v-model="profileForm.first_name" class="form-control">
                    <p>{{ errors[0] }}</p>
                </div>
            </ValidationProvider>
                  
            <button type="button" @click="validateBeforeSubmit()">Update Profile</button>
        </form>
    </div>
</template>

Below is my JS script code

<script>
    import { localize } from 'vee-validate/dist/vee-validate.full';
    import en from "vee-validate/dist/locale/en.json";

    export default {
        data() {
            return {
                profileForm: {
                    first_name: ''
                },
                customMessages: {
                    en: {
                        custom: {
                            'first_name': {
                                required: 'Please enter first name'
                            }
                        }
                    }
                },
            }
        },
        created() {
            localize("en", this.customMessages);
        },
        methods: {
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

Am I missing anything?

Answer 1

custom keyword has been removed in version 3. It is now replaced with fields. Also this info was missing in docs

For more info please follow this issue link on github

Answer 2

One way to do this generically, without attaching it to a specific language like with localize, is to use extend():

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
    ...required,
    message: 'Please enter first name',
});

This will spread and include all the default properties of the rule, while still allowing you to add in your own custom message.

i18n Example:

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
import i18n from 'localization';

extend('required', {
    ...required,
    message: i18n.t('LOCALIZATION_PATH'),
});

Answer 3

Thanks to @pankaj for the right answer. For those who cant be bothered to follow the links, the documentation indicates the following solution:

import { localize } from 'vee-validate';

localize({
  en: {
    messages: {
      // generic rule messages...
    },
    fields: {
      password: {
        required: 'Password cannot be empty!',
        max: 'Are you really going to remember that?',
        min: 'Too few, you want to get doxed?'
      }
    }
  }
});

Answer 4

I think you need to pass this.customMessages.en to localize() or the passed object has a top-level property en. The passed dictionary should only contain your custom messages.

Answer 5

Very simple one. Although not good, but works.

<input name="yourFieldName" type="text" class="form-control" v-model="yourFieldName" v-validate="'alpha_spaces'">

<span class="small text-danger">{{ errors.first('yourFieldName')?'Your custome message':'' }}</span>