Vee-validate: Is there a way to programmatically add an error to an element?

[denjaland]

Hi,

When using laravel, upon submitting a form to the client using axios, it can return an object with validation errors from the server (for instance, the email address can not be used because it is already a known user).
I want to show these errors to the user, but it would be brilliant if I could use vee validate for that.

All elements in the form alreday have vee-validate on the client side.
What I want to do is add an error to them, so vee-validate shows them in the exact same way as the internal errors. As soon as the element's content has been changed, it should remove that error, so that the user can re-attempt.

Is this supported? I've looked at the docs, but couldn't see that.

THanks again - love your work!

[denjaland]

It seems that

this.errors.add('email', 'test', 'server'); 

is working. Is that supported behaviour? Will it continue to be supported?

[logaretm]

Yes this is one way to do it, it will continue being supported.

You can also create a custom rule that calls the backed validation API and adds the laravel backend messages automatically by returning them in an object, take a look at the section after the two notes:

http://vee-validate.logaretm.com/rules.html#custom-rules

[lazychaser]

This will not longer work in new version, you need to specify an id:

const field = this.$validator.fields.find({ name: key, scope: this.$options.scope });

if (!field) return;

this.$validator.errors.add({
  id: field.id,
  field: key,
  msg: errors[0],
  scope: this.$options.scope,
});

field.setFlags({
  invalid: true,
  valid: false,
  validated: true,
});

[garrensweet]

@logaretm This should be reopened, the documentation is very unclear on this.

https://baianat.github.io/vee-validate/api/errorbag.html#api

First, it states you can import the bag, instantiate it and then use the method we've all been used to for so long:

import { ErrorBag } from 'vee-validate';

const bag = new ErrorBag();

// For example, you may want to add an error related to authentication:
bag.add('email', 'Wrong Credentials', 'auth');

// Display it like this:
bag.first('email:auth');

Then it goes on to say that the ErrorObject must conform to certain standards:

const error = {
  field: 'Field name',
  msg: 'Error message',
  rule: 'Rule Name', // optional
  scope: 'Scope Name', // optional
  regenerate: () => 'some string', // optional
  id: 'uniqueId' // optional
};

However, Field name referencing either data-vv-as or data-vv-name does not generate any error in the error bag when used in such a way:

bag.add({ field: 'field', message: 'message })

Given the following:

<input
  name="field"
  v-validate="'required'"
  data-vv-as="field"
  data-vv-name="field"
  />

Which I would expect that some variation of this would work. However, indeed, as @lazychaser has said, his method works. However that's extremely non-intuitive and very overly verbose. Why are we switching to this method and moving away from something so dead simple?

[logaretm]

@garrensweet The plugin is much more complex than it used to, a need for reloading the messages depending on the localization, identifying fields by id is faster than by both the scope and the name, moving the signature to use objects will make it a lot easier in the future to take in more values without breaking previous versions.

Adding messages manually always had its limitations, you need to manage the localization, "friendly" names, regeneration, this has not changed and was always this way.

As for the docs, it should be updated, sorry about the confusion there. I also have a small enhancement in the works, it will try to consolidate the manual error added to an existing field so you won't have to add all the information.

[paul-byford]

@logaretm i have a scenarios where im validating all the form fields on the server side in one post request and the server sends back validation errors for each of the fields it finds a problem with. i would like to add errors generated from the server side to the appropriate field on my front end.

in looking at the docs i found the custom errors example to process server side validations on a single field and add the error message, however in my scenario i would like to process multiple fields. can you recommend how i best use vee-validate for my scenario of processing a set of server side validation errors for multiple fields that all come in the one server response

[logaretm]

@paul-byford Sure there are some issues that discussed this, take a look at #1656

The docs explored the idea of having a "remote" rule, to address your issue you would need to format errors returned from the backend to a vee-validate compliant one.

In other words, return an array of errors containing field as the field name and msg as the error message. Then add it to the error bag using this.errors.add.