CODEWITHSUNDEEP
formsvalidationvue.jsvuejs2
panthro
panthro

Reputation: 24061

How to customize error message (field name) in VeeValidate?

When VeeValidate picks up an invalid field it outputs an error using the fields name, eg.

The address_line_1 field is required.

Is it possible to use a fields label or some other attribute in the error message, as field names are not always user friendly?

Upvotes: 15

Views: 12335

Answers (4)

thefallen
thefallen

Reputation: 9749

You can use data-vv-as which will show in the error message. Read more here.

<input type="text" name="address_line_1" data-vv-as="Address Line 1" />

EDIT: Updated documentation reference here.

Upvotes: 24

usama
usama

Reputation: 71

I got the easy way of vee-validate to customize error messages and names:

1- first install package vee-validate using following command

npm install vee-validate --save

2- import and register the following in main.js

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
import { ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider',ValidationProvider);
Vue.component('ValidationObserver',ValidationObserver);

3- Now move to your component and make an input field:

 <ValidationObserver v-slot="{ handleSubmit }">
                            <form @submit.prevent="handleSubmit(additem)">
                                <ValidationProvider name="Item" rules="required" v-slot="{ errors }">
                                    <div class="row">
                                        <label>Item</label>
                                        <textarea rows="5" id="item" data-vv-as="item1"  class="form-control" v-model="item"></textarea>
                                        <span>{{ errors[0] }}</span>
                                    </div>
                                </ValidationProvider>

                                <div class="row mt-3">
                                    <button class="btn btn-sm btn-primary" type="submit" >Save Item</button>
                                </div>
                            </form>
                        </ValidationObserver>

4- Now import localize where from you are importing ValidationProvider as following in your vue component in script tag.

import {localize} from "vee-validate/dist/vee-validate.full.esm";
localize({

    en: {
names:{ Item: "ITEM FEILD", firstname: "First Name"},
        fields: {
            Item: {
                required: "Please enter some title",
                // alpha: "please enter alphabets only"
            }
        }
    }
});
    localize("en");

Upvotes: 1

alejandro zuleta
alejandro zuleta

Reputation: 14108

If you need to customize your field name to a multi-word string you will run into problems when trying to target this field in another rule. In Vee Validate 3.x you can use vid prop to identify every field leaving name prop for the display text in error messages.

Example:

<validation-provider rules="required" vid="startDate" name="Start date" v-slot="{ errors }">

Then you can use the vid identifier as a target in another validation provider rule.

<validation-provider :rules="{greaterThanDate: {startDate: '@startDate'}}" 
name="End date" v-slot="{ errors }" vid="endDate">

Reference

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17752

For VeeValidate v3 you can pass name attribute for the ValidationProvider

<ValidationProvider name="first name" rules="required|min:2" v-slot="{ errors }">

Upvotes: 8

Related Questions