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?

zcoop98 · Answer 1 · 2020-08-28T23:12:36.637

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'),
});

score 5 · Accepted Answer · answered Sep 18 '19 at 14:27

5

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

answered Sep 18 '19 at 14:27

Pankaj

9,749
32
139
283

score 2 · Answer 3 · answered Jul 30 '20 at 21:40

2

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>

answered Jul 30 '20 at 21:40

Daud khan

2,413
2
14
18

Clean and simple. Works like a charm! – Tharindu Thisarasinghe Mar 30 '22 at 10:33

score 1 · Answer 4 · answered Aug 27 '20 at 15:06

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?'
      }
    }
  }
});

score 1 · Answer 5 · answered Feb 08 '23 at 06:02

1

With vee-validate 3

<ValidationProvider
  name="first_name"
  rules="required"
  :custom-messages="{required: 'Ooops, this is the message'}"
>

answered Feb 08 '23 at 06:02

Sergey Onishchenko

6,943
4
44
51

very useful custom way, thank you so much – new2cpp May 15 '23 at 18:02

score 0 · Answer 6 · answered Sep 16 '19 at 22:08

0

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.

answered Sep 16 '19 at 22:08

Olivenbaum

971
1
6
17

I have now this code: `localize("en", this.customMessages.en);`. This is still not showing me my custom messages – Pankaj Sep 18 '19 at 02:37

Janusz O · Answer 7 · 2021-09-13T13:22:59.933

0

Custom messages can be added via 'extend' as @ zcoop98 showed. It should be noted that the property 'will be translated if we use it like this message: () => i18n.t ('LOCALIZATION_PATH')

edited Sep 13 '21 at 13:22

answered Sep 13 '21 at 11:49

Janusz O

1
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/29811904) – ryanttb Sep 13 '21 at 22:19

custom validation message in vee-validate

7 Answers7