Clear errors after form submition

Versions:

• VueJs: 2.1.7
• Vee-Validate: 2.0.0-beta.18

Description:

Once I submit the form I clear the fields and I want to clear the errors as well, but I’m having a hard time trying to do that.

Steps To Reproduce:

Form:

<form role="form" class="form-horizontal" @submit.prevent="persistData">
            <legend>Supervisor & Deputy Requests</legend>

            <div class="form-group">
                <label for="requesttype" class="col-sm-2 control-label">Request type</label>
                <div class="col-sm-10">
                    <select v-model="form.requesttype" name="form.requesttype" id="requesttype" class="form-control"
                            data-vv-rules="required" v-validate.initial="form.requesttype">
                        <option value=""></option>
                        <option value="Option 01">Option 01</option>
                        <option value="Option 02">Option 02</option>
                    </select>
                    <span v-show="errors.has('form.requesttype')" class="text-danger">This field is required</span>
                </div>
            </div>
            <div class="form-group">
                <label for="userid" class="col-sm-2 control-label">User ID</label>
                <div class="col-sm-10">
                    <input v-model="form.userid" name="form.userid" type="text" class="form-control" id="userid"
                           data-vv-rules="required"
                           v-validate.initial="form.userid">
                    <span v-show="errors.has('form.userid')" class="text-danger">This field is required</span>
                </div>
            </div>
            <div class="form-group">
                <label for="requestdescription" class="col-sm-2 control-label">Request description</label>
                <div class="col-sm-10">
                    <textarea v-model="form.requestdescription" name="form.requestdescription" class="form-control"
                              id="requestdescription" cols="30"
                              rows="10" data-vv-rules="required"
                              v-validate.initial="form.requestdescription"></textarea>
                    <span v-show="errors.has('form.requestdescription')"
                          class="text-danger">This field is required</span>
                </div>
            </div>

            <button type="submit" class="btn btn-primary pull-right">Submit</button>
        </form>

Persist data method:

                let self = this
                // Validate All returns a promise and provides the validation result.
                this.$validator.validateAll().then(success => {
                    if (!success) {
                        // handle error
                        console.log('Error!')
                        return
                    }
                    axios.post('/static/api/SupervisorDeputyRequest/persistdata.php', queryString.stringify(self.form))
                        .then(res => {
                            self.form = {
                                requesttype: '',
                                userid: '',
                                requestdescription: ''
                            }
                        })

I want to clear the errors in the AJAX callback. This code is in a .vue file and vee-validate is being imported in the main.js file.

[devanflaherty]

Hey, I was having issues with clearing form inputs and resetting the errors much like a few here. I’d basically set inputs to null on submit and then run this.$validator.reset(), it didn’t work.

The thing you have to remember is javascript is naturally asynchronous so, when you fire a function it’s running all the code at the same time, or attempting to, and that’s my rough understanding.

SO what I did was run an async function :

const clear = async () => {
    this.contact.firstName = null
    this.contact.lastName = null
    this.contact.email = null
    this.contact.message = null
}

And then call it that function. After it has completed I call the rest:

clear().then(() => {
    this.$validator.reset()
})

And it works for me. Hopefully that helps someone else.

[logaretm]

have you tried:

this.errors.clear();

http://vee-validate.logaretm.com/api#error-bag