CODEWITHSUNDEEP
vue.js
AngeloC
AngeloC

Reputation: 3523

How to clear errors object in vee-validate?

I'd like to clear all the errors from vee-validate in a sign out method, following code seems not working, the errors in the form is still being shown, why?

sign_out: function (e) {
    console.log('sign me out')
    var self = this
    firebase.auth().signOut().then(function () {

      console.log('sign out!')         
      self.info.email = ''
      self.errors.clear()  // clear errors object of vee-validate

    }, function (error) {

      console.log('sign out failed')

    })
  },

here is a jsFiddle that describe the problem in code, when you type '123', a warning is shown, then when you click 'clear', the field is set to '', and errors.clear(), was expecting the warning in the form will go away, but it is not:

https://jsfiddle.net/8j3z82bv/1/

Upvotes: 21

Views: 58929

Answers (9)

Archulan R
Archulan R

Reputation: 478

With vee-validate (4.x), for an email validation,

const { value, resetField } = useField<string>('email', yup.string().email());

const resetButtonAction = () => {
    resetField();
}

Navigate to the docs for further reference.

Upvotes: 0

umair nazir
umair nazir

Reputation: 11

use this.$refs.form.reset() it works for me in vue 2.6+

Upvotes: 1

Nana Adjei
Nana Adjei

Reputation: 1990

Version (3.x)

this.$refs.observer.reset();

Upvotes: 17

dwp4ge
dwp4ge

Reputation: 2003

If using vee-validate (2.x) use $validator as other answers clearly show:

this.$validator.reset();

However if using latest vee-validate (3.x), the $validator object is no longer available and you can add a ref to the ValidationObserver:

<validation-observer v-slot="{ invalid }" ref="form">
  <v-form @submit.prevent="save">
    ...
    <v-btn @click.stop="reset">Reset</v-btn>
    <v-btn type="submit" :disabled="invalid">Save</v-btn>
  </v-form>
</validation-observer>

and then you can either invoke a reset in code as documented here:

reset() {
  this.$refs.form.reset();
  ...
}

or you could expose the built in reset function on the v-slot as documented here:

<validation-observer v-slot="{ invalid, reset }" ref="form">
  <v-form @submit.prevent="save" @reset.prevent="reset">
    ...
    <v-btn type="reset">Reset</v-btn>
    <v-btn type="submit" :disabled="invalid">Save</v-btn>
  </v-form>
</validation-observer>

Upvotes: 13

elenamf86
elenamf86

Reputation: 11

I had the same problem. I wanted to clear errors and then, validate. This worked for me:

this.$validator.reset().then(resolve => {
        this.$validator.validateAll().then((isValid) => {
            if (isValid) {
                ...
            }
       })
})

Upvotes: 1

talkhabi
talkhabi

Reputation: 2759

This worked for me:

this.form.name = '';
this.form.email = '';

this.$nextTick(() => {
    this.errors.clear();
    this.$nextTick(() => {
        this.$validator.reset();
    });
});

Upvotes: 12

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

Use following method:

this.errors.clear()

Upvotes: 7

Hawkeye64
Hawkeye64

Reputation: 637

Use the following:

this.$validator.clean();

Upvotes: 4

Amr Aly
Amr Aly

Reputation: 3905

I have come up with another solution that could help. in your input we'll add another listener so it will be like this:

<input type="email" name="email" v-model="info.email" v-validate="'required|email'" @input="validate">

then will add the validate function that call vee-validate function so your vue instance will be something like this:

var app = new Vue({
    el: '#app',
    data: {
        info: { email: '' }
    },

    methods: {

        onSignin: function (e) { },
        clear_proc: function (e) {
            delete this.info.email

            this.errors.clear()
        },
        validate: function () {
          this.$validator.validateAll();
        }
    }
})

Upvotes: 17

Related Questions