vee-validate: Is it possible to change the fields-bag-name without changing the current name?

So I want to adapt the Autofill naming for Birthdays. However, this leads to several problems. Now I need to find out if I can force vee-validate to change the name of the field.

To understand it better. This is how it currently looks like:

<select
    v-model="day"
    id="day"
    name="day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="'required|excluded:0'"
>
    <option
        :disabled="true"
        value="0"
        v-text="trans('food.Day')"
    />
    <option
        v-for="n in 31"
        :key="n"
        :value="n"
        v-text="n"
    />
</select>

<span
    class="bar"
    :class="{'invalid' : errors.has('day')}"
/>

The name for the select field is "day". However, according to this, it should be named: "bday-day".

Since I'm using vee-validate, this leads to a rename of the field name to "bday-day". Now errors.has('day')} won't work anymore.

But even if I change this to errors.has('bday-day'), I cannot use my internal watcher for changes in values. I get the error:

Failed watching path: "bday-day" Watcher only accepts simple dot-delimited paths. For full control, use a function instead.

This is because I have to force the same name of the v-model name and vee-validate name. v-model="bday-day" cannot work.

To make it short. My end goal is something like this:

<select
    v-model="day"
    id="day"
    name="bday-day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="{required: true, excluded: 0, name: 'day'}"
>
    <option
        :disabled="true"
        value="0"
        v-text="trans('food.Day')"
    />
    <option
        v-for="n in 31"
        :key="n"
        :value="n"
        v-text="n"
    />
</select>

<span
    class="bar"
    :class="{'invalid' : errors.has('day')}"
/>

I would use the name="bday-day" for autofill, but I would set the field name for vee validate to name: 'day'.

Use the data-vv-name attribute

Vee-validate has you covered and you can setup the attribute data-vv-name to achieve precisely this:

<select
    v-model="day"
    id="day"
    name="bday-day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="'required|excluded:0'"
    data-vv-name="day"
>

Now the errors and fields members provided by vee-validate will have a day entry, instead of using the input name bday-day. Thus, if you have a watcher on errors.day, you won't have that nasty problem with the bday-day watching path.

Config option for changing fieldbag Name. � Issue #196 � logaretm , Is there a way change the fieldbag name , just like errorBag to avoid Currently vee-validate does not play well with https://github.com/ratiw/vue-table try fieldsBagName it was misspelled in a couple of places, it was not� 3 vee-validate: Is it possible to change the fields-bag-name without changing the current name? Mar 29 '19. View all questions and answers →

With VeeValidate v3, you have two relevant options you can pass to ValidationProvider, name and vid.

VeeValidate's docs specify that:

name specifies a field name to be used in error messages.

vid is an identifier used for target/cross-field based rules.

From my tests though, vid is also used as the key for fields and errors in the ValidationObserver if provided, and if not, it falls back to name.

As a result, if you have multiple of the same fields in one form, and you're looking to have a unique key name (so that they don't clash and break), then use name purely just for the field name in error messages, and vid to provide a unique ID to be used by ValidationObserver in the fields and errors objects. For example:

<ValidationProvider
  name="hours" // used for error messages
  :vid="hours-${unique-part}" // unique key to stop clashes
  rules="required"
  v-slot="{ errors }"
>...</ValidationProvider>

Configuration, This is not required, but could cause conflicts. Here is how you would set up the options, along with the default values: change if property conflicts events: ' input|blur', fieldsBagName: 'fields', i18n: null, // the events, string, 'input', Pipe separated list of the default event names that will be listened to, to trigger validation. The change event occurs when the value of the input is committed, typically with the blur event, so the validation will be less aggressive, validating only when the user leaves the input. Changing this as the default behaviour may produce unintended results for the current users. So you should make the decision of when to validate …

If you're using VeeValidate v3, you can set "name" attribute for the ValidationProvider

<ValidationProvider name="day" rules="required|excluded:0" v-slot="{ errors }">

vee-validate, vee-validate is a template-based validation framework for Vue.js that allows Being template-based you only need to specify for each input what kind of validators should be used when the value changes. No dependencies. and a name prop which is the field name that will be used in error messages. And off we go! Changing behavior. By default, VeeValidate applies validation on input, but sometimes this isn't desirable. On that email field, for example, maybe we want to give the user a chance to fill it out before telling them that the format isn't correct, or maybe we want to wait until pressing the submit button to validate.

Cross Field Validation, is when a validation rule needs to use another field's value to validate the current field. Properly reference the target field name or vid value in the rules of the other. the fields state, it also allows them to discover each other and be able to vee-validate does not know you are trying to reference another field's value,� vuelidate comes with a set of builtin validators that you can just require and use, but it doesn't end there. All of those are just simple predicates - functions of data into boolean, which denotes if data is valid.

VeeValidate is useful for Vue.js frontend validation - DEV, After user started to input, validate only the element user is interacting VeeValidate recognize elements by name attribute, so we set unique� Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.

Localization, The English messages file is an example on how you would structure those messages. <input v-validate data-vv-rules="alpha|min:3" data-vv-as="First Name" and attributes, if the validator finds a localized attribute name for that field it will be used changes the locale // Merges the English dictionary and sets the current� Meta Stack Overflow is a question and answer site for professional and enthusiast programmers. It only takes a minute to sign up. Sign up to join this community