form reset method is not there.

[shivashankargalla]

Versions:

• VueJs: #.#.#
• Vee-Validate:

Description:

Steps To Reproduce:

[shivashankargalla]

how to clear the whole form just like form.clear() is there any method in vee-validate

[logaretm]

I don't know what do you mean by clear, you can clear the errors using errors.clear()

[peteringram0]

errors.clear() does not seem to work for me. I see the method and pass in the form name but does not clear out.

[logaretm]

@peteringram0 You need to wrap it in vm.$nextTick callback.

[Etheryte]

@logaretm It seems that at the moment, using Vue.nextTick doesn't quite solve the issue: see this JSFiddle. Namely, after doing the following, errors are still displayed:

methods: {
  emptyForm() {
    this.name = ''
    this.email = ''
    Vue.nextTick(() => {
      this.errors.clear()
    })
  }
}

Is there something I'm missing?

[ianfebriyanto]

I had same probelm, I validate form when submit it, after pass the validation, set value to null on each model, and errors appear. any suggestion ? thanks in advance. use this.errors.clear or this.errors.remove(field) not working for me, here's my code:

axios.post(uri, this.inp).then(response => {
               this.responseData = {
			status: true,
			message: 'Success'
		}
                for (var index in this.inp) {
			this.inp[index] = null;
		}
		this.errors.clear();
	}).catch(error => {
		this.responseData = {
			status: false,
			message: 'Error'
		}
	});

[logaretm]

@Etheryte I will try to implement a native fix for this, via an API method probably, since $nextTick isn't working reliably in your example.

[Finrod927]

Any workaround/update for that issue on RC3?

I reinstalled beta25 and it's working fine with $nextTick (jsfiddle)

[johnmerced-ks]

@Finrod927 Please see: #480 (comment)

[Finrod927]

@johnmerced Thanks, but I cannot make it work in my project !
I think I will stay with beta25 until the API is released :(

[andosteinmetz]

I'm having this error in the same context as @ianfebriyanto describes here.

My suspicion is what's happening in this case is that the errors are in fact being cleared, but then being set again because the field classes (ie 'pristine', 'dirty', 'touched' , 'untouched') are not being reset as well, and thus creating an error on an empty required field.

Would an API method to expose ClassListener.reset() fix this?

[logaretm]

@andosteinmetz Sadly no, this issue is very problematic, because the issue is after setting your fields, Vue has not actually updated the DOM yet, when it does it triggers another validation which is way after you cleared the errors.

The problem is that the updates are async, $nextTick only works when you have fields updated in the same tick cycle, otherwise you need to encapsulate it in another $nextTick.

I tried adding pause and resume behavior on the validator so you can stop the validation before resetting the fields. but again the same issue occurs, the async update queue concludes after you resume again.

A less than viable solution is to clear the error bag after a very small delay using setTimeout. I'm looking for other ways to achieve this, but this can take some time unfortunately.

[Etheryte]

I think that the pausing code you have currently should work with some minor changes. If you automatically pause the validator in the error clearing method and then add an automatic resume in the validation methods, I think it ought to work, since the validation should refire only once the fields have actually updated? Adding in a tick handler would ensure all validators cancel before resume is called. I haven't tested the approach myself, though.

// In validators
if (this.paused) {
    Vue.nextTick(() => {
        this.resume();
    });
    return Promise.resolve(true);
}

[logaretm]

@Etheryte I will try your suggestion, thanks!

[logaretm]

So I spent a few hours on what it looked like a goose chase, now I feel stupid, so:

After a lot of testing, it seemed like the model watchers were getting triggered too late, after the nextTick even. which doesn't make sense as normal watchers were getting the correct values in correct timings, it was all because of the debounce function as it caused unintended asynchronous behavior, now it should call the debounced function immediately if the wait time is 0.

New API method:

this.$validator.clean();

Is just a wrapper around errors.clear but it calls it after the nextTick so you don't have to yourself, if you still want to use errors.clear you need to wrap it yourself as I didn't want to add any more dependencies for the errorBag that it doesn't need.

Updated fiddle:

https://jsfiddle.net/zcppuzjc/1/

[johnmerced-ks]

@logaretm I can't see the .clean() method.
Having this issue: #514
not sure if it's related.

[logaretm]

@johnmerced Its not released yet, I will see if I can finish documenting the changes and release one today.

[johnmerced-ks]

@logaretm Awesome - thank you!

[giammin]

@logaretm the problem is still here and your approch seems not to work

also the fiddle you provide does not reproduce the problem when commenting the line 12:
//this.$validator.clean();

[logaretm]

@giammin The fiddle uses the latest commited js in master, some issues is still there, I've updated it to use rc.6

https://jsfiddle.net/zcppuzjc/5/

[gazugafan]

Adding a delay (via data-vv-delay) breaks this. Having a lot of trouble resetting a form with it :(
https://jsfiddle.net/gazugafan/swaks7mL/

[jeremyzahner]

Can confirm the issue with the delay that @gazugafan reported.