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.

function Validate(){

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";

    }
//T8
if(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";
    }

//T12
if(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;
}

<form  method="post" name="customer" action="newcustcheck.php" onsubmit="return Validate()" >
    <table width="200">
        <tr>
            <td><div class="message">*</div>Customer Name:</td>
            <td><input type="text" name="name" ></td>
            <td> <label class="message" id="message" ></td>

        </tr><tr>
            <td><div class="message">*</div>Address:</td>
            <td><input type="text" name="address" ></td>
            <td> <label class="message" id="message1"></td>
        </tr>
                <tr>
            <td><div class="message">*</div>City:</td>
            <td><input type="text" name="city" ></td>
            <td> <label class="message" id="message2"></td>
        </tr>
      </table>
  <input type=submit />
      </form>