how to show onsubmit validation message on client-side in javascript except alert pop up box?

Question

I want to validate form inputs before submitting to the server side, so I am using onsubmit, but I want to show each error message separately by not using 'alert', is that possible? How to do it? Or onsubmit can only return message over alert?

Update I already validated each of the input by using functions and there are error messages inside each function. But if I put these functions under "submit", when I click submit, no error message shows up. here is my validation:

document.addEventListener("DOMContentLoaded", function () {
    myform.addEventListener("submit", function(){
    // validate all inputs
        validateName(); 
        validateEmail(); 
        validatePhone();
        validateAddress();
        validateCity();
        validatePost();
        validateProvince();
        validateProduct1();
        validateProduct2();
        validateProduct3();
        getAtLeastOne();
        validateDelivery();
        //validate input before submit
        if (validateName() && validateEmail() && validatePhone() && validateAddress() &&
        validateCity() && validatePost() && validateProvince() && validateProduct1() &&
        validateProduct2() && validateProduct3() && getAtLeastOne() && validateDelivery())
        {
             // at least one product input is not empty
            if (product1 !="" || product2 !=""||product3 !="")
           {
                return true;
           }
           else{
               erorMessage.innerHTML =`Input fields are required.`;
               return false;
           }
        }
    });
    

});    

Answer 1

You need to use event.preventDefault() to stop the form from submitting if there are issues. return false does nothing in an event handler attached using addEventListener .

myform.addEventListener("submit", function(e) {
    // validate all inputs
    validateName();
    validateEmail();
    validatePhone();
    validateAddress();
    validateCity();
    validatePost();
    validateProvince();
    validateProduct1();
    validateProduct2();
    validateProduct3();
    getAtLeastOne();
    validateDelivery();
    //validate input before submit
    if (validateName() && validateEmail() && validatePhone() && validateAddress() &&
        validateCity() && validatePost() && validateProvince() && validateProduct1() &&
        validateProduct2() && validateProduct3() && getAtLeastOne() && validateDelivery()) {
        // at least one product input is not empty
        if (product1 != "" || product2 != "" || product3 != "") {
            return true;
        } else {
            e.preventDefault();
            erorMessage.innerHTML = `Input fields are required.`;
        }
    }
});