I have been working on some basic validation for required fields and minimum length. The problem arises when I submit a network request for data insertion, the validation works perfectly fine. However, after the network call, if I try to make my text field empty, it shows an error. How can I ignore this validation? Below is the code snippet of my component. Thank you in advance.
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-6">
<form @submit.prevent="processTaskForm">
<div class="card my-3">
<div class="card-header">
<h3 class="text-center">Add Task in Todo</h3>
</div>
<div class="card-body">
<div class="form-group">
<label for="">Task</label>
<input type="text" class="form-control" name="task" v-model.trim="$v.task.$model" id="task">
<div v-if="$v.task.$error">
<div v-if="!$v.task.required" class="text-danger">
Field is required
</div>
<div v-if="!$v.task.minLength" class="text-danger">
Task must be minimun length of 8
</div>
</div>
</div>
<input type="submit" value="Add Task" class="btn btn-primary">
<!-- <span v-if="submitStatus === 'ERROR'" class="text-danger ml-3">Please fill all fields correctly</span> -->
</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import {required,minLength} from 'vuelidate/lib/validators'
export default {
name: "Todo",
data() {
return {
task :'',
submitStatus : 'OK'
}
},
validations: {
task: {
required,
minLength: minLength(8)
}
},
methods:{
processTaskForm(){
this.$v.$touch()
if (this.$v.$invalid) {
this.submitStatus = 'ERROR'
} else {
this.submitStatus = 'PENDING'
const headers = {
"Authorization" : "Bearer "+this.$store.state.user.token
}
axios.post('/api/add-task', {
task: this.task,
},{
headers:headers
})
.then((response) => {
if(response.data.status){
this.task = ""
this.submitStatus = 'OK'
}
}, (error) => {
console.log(error);
});
}
}
}
}
</script>
<style>
</style>