Wait for the response from a PHP page before submitting a form

Question

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.

Answer 1

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);
            },
        });
    });
}