Adding a custom error message in VeeValidate3 and VueJS

Question

I'm trying to add a new error message for a custom validator. First, i changed the default language for validation errors this way:

import VeeValidate, { Validator } from 'vee-validate';
import it from 'vee-validate/dist/locale/it';


Validator.localize({ it: it });
Vue.use(VeeValidate, { inject: false, fastExit: false, locale: 'it' });

Here's the extended validator (in another file):

this.$validator.extend('dateFormat', {
                    validate: value => {
                        let reg = /(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9][0-9]/;
                    
                    if (reg.exec(value) === null) {
                        return false;
                    }
                    return true;
                }
            });
            validators.push('dateFormat');

How can i show a custom message when the date format is not correct? Thanks

zcoop98 · Accepted Answer · 2020-07-24 15:30:52Z

1

Two ways: (Per the VeeValidate3 docs)

You can change the error message by returning strings in the validation function itself:

import { extend } from 'vee-validate';

extend('positive', value => {
    if (value >= 0) {
        return true;
    }

    return 'This field must be a positive number';
});

Or, you can use the extended format and pass in a message property:

this.$validator.extend('dateFormat', {
    validate: value => {
        let reg = /(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)[0-9][0-9]/;
               
        if (reg.exec(value) === null) {
            return false;
        }
        return true;
    },
    // message property:
    message: 'The date format is incorrect',
});
validators.push('dateFormat');

Localization

The aforementioned solutions fall short if you're looking to support multiple languages.

Based on the docs, you should be able to add localized messages for any language using the { localize } import and the following object syntax:

import { localize } from 'vee-validate';

localize({
  en: {
    messages: {
      required: 'this field is required',
      min: 'this field must have no less than {length} characters',
      max: (_, { length }) => `this field must have no more than ${length} characters`
    }
  }
});

As a sidenote, you can also simplify your if (reg.exec(value) === null) ... lines to:

return reg.exec(value) !== null;

edited Jul 24, 2020 at 15:30

answered Jul 23, 2020 at 22:24

zcoop98

3,2852 gold badges26 silver badges38 bronze badges

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

1 Comment

Misone Over a year ago

I tried to pass the 'message' property but it seems to still return the default message, that is, 'The {_field} value is not valid' Is it something related to the HTML element?

Misone · Accepted Answer · 2020-07-24 13:41:54Z

0

This is how I solved it, do not know if it is the best practice but seems to work:

//Add this line
it.messages.dateFormat = function (field) { return 'Format for ' + field + ' not valid'; };
Validator.localize({ it: it });
Vue.use(VeeValidate, { inject: false, fastExit: false, locale: 'it' });

answered Jul 24, 2020 at 13:41

Misone

331 silver badge6 bronze badges

2 Comments

zcoop98 Over a year ago

I'm glad you got it figured out! If I had to guess, I'd wager that the thing stopping the other solution from working is something to do with localization... The docs provide another way of adding messages for locales here that may be worth taking a look at.

zcoop98 Over a year ago

Actually, I think that's exactly what's going on here, it.messages.dateFormat is doing the same thing as the docs show, just shorthand. I'll add that syntax from the docs to my answer.

Collectives™ on Stack Overflow

Adding a custom error message in VeeValidate3 and VueJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related