Display All Validation Messages Inline At Once Onsubmit

I would like JavaScript to display all the validation messages at once when the submit button is clicked. Customer Name: TextBox: *Customer Name must not be blank Address : T

Solution 1:

You are returning from the validate function as soon as you find first invalid input, you should keep looking instead and return only after every input field is validated.

functionValidate(){

var x=document.forms["customer"]["name"].value;
var y=document.forms["customer"]["address"].value;
var z=document.forms["customer"]["city"].value;
var isValid = true;

if(x==null || x==""){
    document.getElementById('message').style.visibility="visible";
    document.getElementById('message').innerHTML="Customer Name must not be blank";
    isValid =  false;

}
else{
    document.getElementById('message').style.visibility="hidden";

    }
//T8if(y==null || y==""){
    document.getElementById('message1').style.visibility="visible";
    document.getElementById('message1').innerHTML="Address Field must not be blank";
    isValid =  false;
}
else{
    document.getElementById('message1').style.visibility="hidden";
    }

//T12if(z==null || z==""){
    document.getElementById('message2').style.visibility="visible";
    document.getElementById('message2').innerHTML="City Field must not be blank";
    isValid =  false;
}
else{
    document.getElementById('message2').style.visibility="hidden";
    }
  return isValid;
}

<formmethod="post"name="customer"action="newcustcheck.php"onsubmit="return Validate()" ><tablewidth="200"><tr><td><divclass="message">*</div>Customer Name:</td><td><inputtype="text"name="name" ></td><td><labelclass="message"id="message" ></td></tr><tr><td><divclass="message">*</div>Address:</td><td><inputtype="text"name="address" ></td><td><labelclass="message"id="message1"></td></tr><tr><td><divclass="message">*</div>City:</td><td><inputtype="text"name="city" ></td><td><labelclass="message"id="message2"></td></tr></table><inputtype=submit /></form>