Reset form validation

[xereda]

Hello,

How do I reset errors in my form? I have a modal window and when reopen, I disregard the previous mistakes.

What do you advise today with vee-validate?

Thank you.

[logaretm]

Check the available methods on the errors bag object you can use clear or remove to remove any errors.

you would use it like this:

this.errors.clear(); // removes errors for all fields
// or
this.errors.remove(field); // removes errors for a specific field.

[xereda]

I used this.errors.clear()

Tks

[kgrosvenor]

this doesnt work for me...

self.errors.clear();

[fakiolinho]

When i use v-model and i want to reset everything (data values + vee-validate error messages) this is quite handy:

data() {
  return {
    user: {
      email: ''
    }
  };
},
methods: {
  reset() {
    this.user = {
      email: ''
    };
    this.$validator.clean();
  }
}

If i don't want to reset data values just vee-validate error messages, then i use:

this.errors.clear();

[jeck5895]

@xereda Hello how did u clear the form errors upon closing the modal?? I've tried different methods of clear but it doesnt work

[BoyardIsBack]

According to the doc
this.$validator.clean(); is deprecated

[vee-validate] validator.clean is marked for deprecation, please use validator.reset instead.

Like this
this.$validator.reset()

[bjunc]

I've found it useful to put the reset in nextTick, if you also want to reset the values. For example:

this.$validator.reset()

Works, but leaves the value in the field (not a true reset)

this.formFields.email = null
this.$validator.reset()

Clears the value, but doesn't properly reset the errors (I suspect due to timing)

this.formFields.email = null
this.$nextTick(() => this.$validator.reset())

Does both: resets the value, and the errors

[romualdr]

Shouldn't this be opened ?

Doing this.$nextTick(() => this.$validator.reset()) is not really straightforward and most of us will need to find this issue to fix this behavior, right ?

IMHO, it seems like this.$validator.reset() does not behave 'normally' and should actually reset everything by default without using $nextTick.

Anyway, I put a comment in the code with this issue for my coworkers. If you're reading this, this is the solution for now ! :)

[bjunc]

@romualdr the way I look at it is that this.$validator.reset() shouldn't be confused with HTMLFormElement.reset(). If you want to reset the form, do that before attempting to reset the validator. Since there might be a timing issue (race condition) before the form fields update and the validator is reset, then this.$nextTick comes to rescue.

If you want a one-line reset, you could create a method (or mixin for reuse) that "resets" the form fields (using Vue's reactivity to populate v-model inputs), then resets the validator.

All that said, the documentation could use an explanation like this, or at least mention that race conditions can happen if programmatically updating form field values that use v-model, and then immediately calling this.$validator.reset() (@Baianater)

[romualdr]

@bjunc Makes sense, i understand, thank you for answering.

👍 for the documentation "tip/warning"

[makslevental]

for anyone else interested here is my nuke:

      clearNewShow() {
        this.formValues = {...blankForm}
        this.dates = {start: '', end: ''}
        this.$validator.pause()
        this.$nextTick(() => {
          this.$validator.errors.clear()
          this.$validator.fields.items.forEach(field => field.reset())
          this.$validator.fields.items.forEach(field => this.errors.remove(field))
          this.$validator.resume()
        })
      }

[alainperrier]

You saved my time @makslevental, thanks ! I'm currently using nuxt (SSR) and this is the only working solution I found.

Here is my version (I didn't need reseting $validator.fields.items.forEach..., and I'm using v-form as well)

try {
  const { data } = await this.form.post('/api/contact').then(() => {
    this.$validator.pause()
    this.$nextTick(() => {
      this.form.clear()
      this.form.reset()
      this.$validator.reset()
      this.$validator.errors.clear()
      this.$validator.resume()
    })
  })
} catch (e) {
  this.$validator.validateAll()
}

[nivv]

@makslevental solutions works, but not if data-vv-delay is used, then a setTimeout function needs to be used with same delay as the data-vv-delay value

[logaretm]

@nivv in the next tag coming up soon, the ongoing validations will be canceled if the validator reset was called.

[talkhabi]

After testing too many solutions, this worked for me:

this.form.name = '';
this.form.email = '';
this.$nextTick(() => {
    this.errors.clear();
    this.$nextTick(() => {
        this.$validator.reset();
    });
});

[manuelgeek]

@logaretm that saved my day. thank you

[sebastianblanco]

this work for me:

this.errors.clear(); this.$validator.clean();

[autn]

Hello, I have a form with multiple inputs and the error messages for each input. The vee-validator is working well, but when I delete the input(s), the validator is not work fine. Anyone can help?

The file is: https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/variations.blade.php

Updated: I solved my issue, the reason is I used index as key, so the keys are mixed after I remove the item(s). Thanks

[santicros]

If anyone finds this, now the way to do it is like explained in the docs (https://logaretm.github.io/vee-validate/guide/forms.html#resetting-forms) accessing with refs:

<ValidationObserver ref="form">...</ValidationObserver>

  methods: {
    onSubmit () {
        // Resetting Values
        this.firstName = this.lastName = this.email = '';

        // Wait until the models are updated in the UI
        this.$nextTick(() => {
          this.$refs.form.reset();
        });

      }
  }