Proposition : $errors as array of non passing validators

Hi !

I’d like to know if it would be possible to add an array of validator’s names ($errors) for each non passing validator of each value :

How would it look like :

// here nothing change
validations: {
  foo: { required, minLength: minLength(4) }
}

// ... somewhere later (or by user input)

foo = ''
console.log($v.foo.$errors) // ['required, 'minLength']
foo = 'foo'
console.log($v.foo.$errors) // ['minLength']
foo = 'foobar'
console.log($v.foo.$errors) // []

This would enable :

• validator priority (defined by key order)
• possibility to list all the errors in template : <strong v-for="error in $v.foo.$errors">{{ error }}</strong>
• possibility to use validator key as reference for i18n : <strong v-if="$v.foo.$errors.length">{{ $t($v.foo.$errors[0]) }}</strong>

How hard would that be :

Probably not much more than a new validation getter such as :

  $errors() {
    const proxy = this.proxy
    return this.ruleKeys.filter((rule) => !proxy[rule])
  },

If this feature is not already coded, and you’re willing to accept it but have no time to code it, let me know and i’ll submit a PR.

Thanks for reading !

[thedamon]

The vuelidate-error-extractor doesn’t seem to do what this suggests. It seems to be entirely oriented around templating. I already have my templating pattern figured out and would just like an array of error fields in the style of vuelidate (ie data only) for a11y purposes.

[dobromir-hristov]

I get what you mean. I have plans to extract those helpers, just been super busy lately.