I am facing an issue in my Laravel project where I have implemented a method in the Vue instance to validate resource availability upon form submission. The validation is done through an AJAX call using axios, and if any resources are unavailable, I receive an array of error messages in response. However, despite trying to prevent the form submission with e.preventDefault(), it does not seem to be working as expected.
Interestingly, when I use e.preventDefault() outside of the axios request block, the form submission is successfully prevented. This led me to believe that there might be a scope issue with the 'e' variable. So, I am wondering how I can extend the scope of the 'e' variable to make it work within the axios request?
Below is the code snippet causing the problem:
checkAvailability(e){
let date = document.getElementById('date').value;
let errorList = document.getElementById('errors');
date = date.split('-').reverse().join('-');
axios.get('/materials/check-availability', {
params: {
date: date,
time: this.time,
ek: this.ekNumber,
dk: this.dkNumber,
ck: this.ckNumber,
zv: this.zvNumber,
ton: this.tonNumber
}
})
.then(function(response) {
let errors = response.data;
if(errors.length > 0)
{
e.preventDefault();
errorList.innerHTML = '';
for(let i = 0; i < errors.length; i++)
{
let li = document.createElement('li');
li.innerText = errors[i];
errorList.appendChild(li);
}
errorModal.show();
}
})
.catch(function(error){
console.log(error);
});
// e.preventDefault();
}