Vee-validate: Custom Error Messages not showing

[gargonlinejobs]

About

I am using Laravel 5.8 with vue.js component. This is about showing custom error message when validating the form.

Issue

There seems to be no way to implement custom error messages.

What did I try so far?

I found this old issue here
Although this works fine but NOT in latest version.

Posted an issue on StackOverFlow also. Here are more details about it.

Below code used for vee-validate package in app.js

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

There is component used. Below is HTML code.

<template>    
    <div>
        <ValidationObserver ref="observer" tag="form" v-slot="{ invalid, passes }">            
        <ValidationProvider name="first_name" :rules="`required|alpha|min:3|max:10`">
        <div slot-scope="{ errors }">
            <input v-model="profileForm.first_name" class="form-control">
            <p>{{ errors[0] }}</p>
        </div>
       </ValidationProvider>            
      <button v-else :disabled="invalid" type="button" class="btn btn-primary">
        Update Profile
      </button>
        </ValidationObserver>
    </div>
</template>

Below is Js script code

<script>
    import en from "vee-validate/dist/locale/en.json";
    import { localize } from 'vee-validate/dist/vee-validate.full';
    export default {
        data() {
            return {                
                profileForm: {
                    first_name: ''                    
                },
                customMessages: {
                    en: {
                        custom: {
                            'first_name': {
                                required: 'Please enter first Name',
                                alpha: 'Only Alphabets allowed'
                            }
                        }
                    }
                },
            }
        },
        created() {
            localize('en', this.customMessages.en);
        }
    }
</script>

[logaretm]

This topic seems missing from the docs, I will add it then link it here. Thanks for reporting this.

[logaretm]

I added this to the docs, the custom key was changed in v3 to fields You should find the docs and examples here:

https://logaretm.github.io/vee-validate/guide/localization.html#using-the-default-i18n

[emaiax]

@logaretm just a quick question: is it possible to have a whole locale file w/ my custom rules already in it?

for example: locale.my-lang.json having:

{
  "code": "myLang",
  "messages": {
    // all messages from `en`
    "unique": "The {_field_} is already taken"
  }
}

  import myLang from "./locale.my-lang.json";

  localize("myLang", myLang);

  extend("unique", myCustomUniqueValidation);

When unique validation fails, it always display {_field_} is not valid..