How to properly access the exact fields validated with VeeValidate v3 observer (validateWithInfo)?

36 Views Asked by At

Is it possible to find out what exact field/child/node/DOM element the VeeValidate v3 ValidationProvider watches/listens to?

Currently, I am sorry, but updating to wonderful VeeValidate v4 is not possible in this project.

The main reason is to locate what field corresponds to what Vue VNode or DOM Node/Element after executing ValidationObserver's validateWithInfo which returns a Promise resolving to an object with ObserverField object(s) which, in turn, contains primitive values only but is keyed matching field name each.

One of the reasons the names (i.e. <abc name="Amazing Name Field" />) are stated is validation messages interpolation function.

For example, it would allow to focus on that invalid non-native or native field without name nor id prop or attribute assigned in more appropriate manner without re-iterating through the whole DOM again searching for a needle.


Considering the source code, it seems VeeValidate does not store actual references to non-native (i.e. Vue Component with <input> inside) nor native Vue node (e.g. <input>) found with v-model but sets Vue Component (i.e. $listeners) or Vue native (i.e. node.data.on) listeners to handle on input, blur, and change events.

export function addVNodeListener(vnode: VNode, eventName: string, handler: Function): void {
  if (vnode.componentOptions) {
    addComponentNodeListener(vnode, eventName, handler);
    return;
  }

  addNativeNodeListener(vnode, eventName, handler);
}

Source


Currently, it's being searched manually via iterating over provider.$children and searching for id or name matching the field, or querying over provider.$el for any DOM with these same id or name. Yet, the library allows to validate fields with neither assigned and containing multiple fields inside even if it listens to a single since v3.3.0: extractId, findInputNodes.

0

There are 0 best solutions below