Before submitting a form, I want to validate the data by calling a PHP page, which returns an empty string if everything is okay and an error message if not. My current code works, but async: false is deprecated. I'm having trouble finding an alternative that works. Can you help me?
Thank you!
$("form").on("submit", function(event) {
let idForm = $(this).attr("id");
if(correspFormCtrl[idForm]) {
let dataFormArray = $(this).serializeArray();
let dataForm = dataFormArray.reduce((acc, item) => {
acc[item.name] = item.value;
return acc;
}, {});
let cible = $(this);
let ok = false;
$.ajax({
url : "php/verifHtmlForm.php",
type: "POST",
async: false,
data: { listeChamps: correspFormCtrl[idForm].champs, valeursForm: dataForm},
success: function(data) {
if(data) {
cible.find(".retourErreurForm").removeClass("invisible")[0].scrollIntoView({ block: 'start' });
cible.find(".infosErreurHtml").html(data);
}
else {
cible.find(".retourErreurForm").addClass("invisible");
ok = true;
}
},
complete : function() {
if(!ok) {
event.preventDefault();
return false;
}
},
error: function(error) {
console.error(error);
}
});
}
});
I have tried using a Promise, but i don't exactly know how to use this type of technology or if it's appropriate to use in this scenario.
You can use async and await with a Promise to achieve The validateForm function returns a Promise. The $.ajax call is wrapped in a Promise to make it easier to use with await.
$("form").on("submit", async function(event) {
event.preventDefault();
let idForm = $(this).attr("id");
if (correspFormCtrl[idForm]) {
let dataFormArray = $(this).serializeArray();
let dataForm = dataFormArray.reduce((acc, item) => {
acc[item.name] = item.value;
return acc;
}, {});
try {
let data = await validateForm(dataForm, correspFormCtrl[idForm].champs);
let cible = $(this);
if (data) {
cible.find(".retourErreurForm").removeClass("invisible")[0].scrollIntoView({ block: 'start' });
cible.find(".infosErreurHtml").html(data);
} else {
cible.find(".retourErreurForm").addClass("invisible");
this.submit(); // Continue with the form submission
}
} catch (error) {
console.error(error);
}
}
});
function validateForm(dataForm, champs) {
return new Promise((resolve, reject) => {
$.ajax({
url: "php/verifHtmlForm.php",
type: "POST",
data: { listeChamps: champs, valeursForm: dataForm },
success: function (data) {
resolve(data);
},
error: function (error) {
reject(error);
},
});
});
}