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 · Accepted Answer · 2020-08-28 23:12:36Z

10

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

edited Aug 28, 2020 at 23:12

answered Aug 28, 2020 at 22:20

zcoop98

3,2852 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj · Accepted Answer · 2019-09-18 14:27:32Z

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, 2019 at 14:27

Pankaj

10.2k40 gold badges152 silver badges298 bronze badges

Comments

Daud khan · Accepted Answer · 2020-07-30 21:40:29Z

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, 2020 at 21:40

Daud khan

2,5192 gold badges17 silver badges19 bronze badges

1 Comment

Tharindu Thisarasinghe Over a year ago

Clean and simple. Works like a charm!

omarjebari · Accepted Answer · 2020-08-27 15:06:47Z

2

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

answered Aug 27, 2020 at 15:06

omarjebari

5,6393 gold badges43 silver badges34 bronze badges

Comments

Sergey Onishchenko · Accepted Answer · 2023-02-08 06:02:35Z

2

With vee-validate 3

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

answered Feb 8, 2023 at 6:02

Sergey Onishchenko

7,9595 gold badges51 silver badges52 bronze badges

Comments

Janusz O · Accepted Answer · 2021-09-13 13:22:59Z

1

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, 2021 at 13:22

answered Sep 13, 2021 at 11:49

Janusz O

112 bronze badges

3 Comments

ryanttb Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Erbi Silva Over a year ago

It has been some time since this publication was made. However, in 2023 it still helped me carry out a task I have in a project. Your solution allows translations to work. However, I can no longer access the {field} fields. Any suggestion?

Erbi Silva Over a year ago

@Janusz O found the answer: extend('required', { ...required, message: (field) => field + ' ' + i18n.t('validations.mandatory'), }

Olivenbaum · Accepted Answer · 2019-09-16 22:08:47Z

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, 2019 at 22:08

Olivenbaum

1,0061 gold badge7 silver badges17 bronze badges

1 Comment

Pankaj Over a year ago

I have now this code: localize("en", this.customMessages.en);. This is still not showing me my custom messages

Collectives™ on Stack Overflow

custom validation message in vee-validate

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related