Vee-validate: How to display an Error Message received by the Rest Api onto a specific field name?

[coderabsolute]

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc.5

Description:

On the Login page, once the this.$validator.validateAll() is called the request goes to the back-end and when the request comes back with a 401 status code I need to display the incorrect username/password error message.

Steps To Reproduce:

This is how the existing cook looks like.

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

<input 
                            name="username"
                            v-validate="'required|email'"
                            v-model="vm.username" 
                            autofocus
                            class="input is-medium"
                            v-bind:class="{
                              'is-danger': errors.has('username'),
                              'is-success': !errors.has('username')
                            }"
                            type="email"
                            placeholder="[email protected]"
                          />
                          <span class="icon user">
                            <i class="fa fa-user"></i>
                          </span>

validateBeforeSubmit: function (e) {
      this.$validator.validateAll()
      .then(() => {
        this.onSubmit()
      })
      .catch(() => { })
    }

onSubmit: function () {
  axios.post('auth', json)
  .then()
  .error(error => {
    // when 401 is received I want to add the value to the value to the error bag?
  })
}

[logaretm]

You can use

this.errors.add('credentials', msg);

where msg is the message you want to display, and just add it to the template using:

{{ errors.first('credentials') }}

[coderabsolute]

Thanks @logaretm!

[zeeshanyshaikh]

Am not able to add error messages to error bag using
this.errors.add('credentials', msg);

Here is my code in catch block of Axios call

if(error.response.status == 422 && typeof error.response.data == "object" && error.response.data)
{
$.each(error.response.data, function(field, messages) {
this.errors.add(field, messages[0]);
});
}

Here is the error message

Uncaught (in promise) TypeError: Cannot read property 'add' of undefined

[zeeshanyshaikh]

My Bad, my this was referencing to messages object in the for each loop.

I assigned variable name to my vue object and used code as
app.errors.add(field, messages[0]);

Actually, am adding server side error messages to error bag but now the problem is am getting two messages for the same input.

for example, if first-name is required and if I submit the form, I will get two error message in my error bag one from vee-validator and other by Axios(server side). Can you please suggest on this.

[logaretm]

You can use errors.collect instead of errors.first to display all errors of a field, or not send anything to the server if the field is incorrect in the client side to save unnecessary API calls.

[zeeshanyshaikh]

Yes, am not sending any request if it failed client side but in case if I get any error from server side then there is a problem as am using this line of code to check if errors exist
<span v-if="errors.has('firstname')" class="help-block" v-cloak>@{{ errors.first('firstname') }}</span>

Since client error message is cleared off when i type something in the input box but the server side error messages are not cleared and hence the errror message never goes off.

[logaretm]

I see, that is because the errors get removed internally by the field id. Your server side errors doesn't include the id so it wouldn't be removed. this is an enhancement that we could implement in the next tag, you can create a new issue for it for tracking.

[zeeshanyshaikh]

Thanks, @logaretm. I have raised a new issue https://github.com/baianat/vee-validate/issues/818

[coderabsolute]

@logaretm Am not sure whether the errors.add is still valid for 2.1.0-beta.6?

this.errors.add('Item', 'The item is expired.');

This is throwing me an error "TypeError: Cannot create property 'scope' on string 'Item'".

[coderabsolute]

I got it, but for others posting the answer here.

this.errors.add({
      field: 'Item',
      msg: 'The item is expired.'
    });

[logaretm]

@coderabsolute sorry about that, the response was old and wasn't updated to reflect the new changes. Thanks for the update!

[jwwb681232]

I have multiple scopes, how to display specific verification information to the specified scope

[jwwb681232]

I have multiple scopes, how to display specific verification information to the specified scope

Oh, I seem to have found a solution,

this.$validator.validateAll('create').then(result=>{
    if(result){
        this.createDialogForm.form.post('api/user').then((res)=>{
            this.createDialogForm.createDialog = false;
            this.tableFilterReset();
        }).catch((responseErrors)=>{
            let ServerErrors = [];
            $.each(responseErrors.response.data, function(field,message) {
                ServerErrors.push({field:field,msg:message[0],scope:'create'})
            });
            this.errors.add(ServerErrors);
        });
    }
});