Well I came up with an answer just plain js, that can work with the ugly Vue instances.
function Validator() {
"use strict";
this.errors = [];
this.objectType = getQueryVariable('item');
this.id = getQueryVariable('item_detail');
this.form = null;
this.currentHandler = null;
}
Validator.prototype.validate = function () {
this.currentHandler = this.handleErrors;
let formData = this.collectFormData(true);
formData.append('validate', true);
axios.post('/admin/validate.php', formData)
.then((response) => {
console.log(response.data);
this.currentHandler = this.displayWarnings;
this.verify();
}).catch(error => {
this.handleCatch(error)
})
};
Validator.prototype.collectFormData = function ($validate) {
let formData = new FormData(this.form);
formData.append('object_type', this.objectType);
formData.append('id', this.id);
if ($validate) {
formData.append('validate', true);
}
return formData;
};
Validator.prototype.submitForm = function () {
this.form.submit();
};
Validator.prototype.handleWarnings = function () {
this.displayWarnings(this.errors)
.then(() => {
this.errors = [];
})
.catch((data) => {
if (data === 'cancel') {
this.submitForm();
} else {
swal('very weird data really can only be cancel');
}
})
};
Validator.prototype.handleErrors = function () {
this.displayErrors(this.errors);
this.errors = [];
};
Validator.prototype.verify = function () {
let formData = this.collectFormData(false);
this.currentHandler = this.handleWarnings;
axios.post('/admin/validate.php', formData)
.then(() => {
this.submitForm();
}).catch(error => {
this.handleCatch(error);
});
};
Validator.prototype.displayWarnings = function (messages) {
return swal({
title: "You've got potential (problems).",
text: messages,
type: "warning",
width: 800,
showCancelButton: true,
allowEscapeKey: false,
allowOutsideClick: false,
cancelButtonText: "I've got my reasons.",
confirmButtonText: "Let's fix it."
});
};
Validator.prototype.displayErrors = function (messages) {
swal({
title: 'Ouch!',
html: messages,
width: 800,
type: 'error'
})
.catch(() => {
console.log('no oop')
})
};
Validator.prototype.handleCatch = function (error) {
if (error.response) {
this.errors = error.response.data;
if (error.response.status === 422 || error.response.status === 422) {
this.errors = error.response.data.join('<br>');
}
this.currentHandler();
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
//swal("Wow we have problems", error.response.data, 'error');
console.log(error.request);
}
};
Validator.prototype.handleSubmission = function (e) {
this.form = document.querySelector('form.contentdetail');
this.validate();
validate_submit(e, () => {
this.validate();
});
};
then I call it on submitting the form. via addEventListener
$('[data-submit-call-back]').on('submit', function (e) {
e.preventDefault();
let validation = new Validator();
validation.handleSubmission(e);
}
});
