How to display multiple error messages on the same page using JavaScript

I rewrote your code a bit. Here is what I changed:

• Instead of checking that the value equals " ", I have used the ! operator.
• I have used push on the array instead of appending by index. This means that there are no empty spots in your array. push adds an element to the end of the array, irrespective of the index.
• I used a forEach loop on the array. This goes through all the enumerable elements, irrespective of how many there are.

So, the example:

JS

// This could be done on form submit, I used a button for the fiddle.
document.getElementById("button").onclick = function () {   
    var errorMsg = new Array();

    if(!document.getElementById("fullname").value){
        errorMsg.push("Please Enter Full Name");
    }

    if(!document.getElementById("street").value){
        errorMsg.push("Please Enter Street Name");
    }

    if(!document.getElementById("postcode").value){
        errorMsg.push("Please Enter Postal Code");
    }

    if(!document.getElementById("phone").value){
        errorMsg.push("Please Enter Phone Number");
    }

    if(!document.getElementById("email").value){
        errorMsg.push("Please Enter Email Id");
    }

    var messageHtml = "";

    errorMsg.forEach(function (message) {
        messageHtml += "<li>" + message + "</li>";
    });

    document.getElementById("error").innerHTML = messageHtml;
};

See this fiddle: http://jsfiddle.net/M48gA/

You need to append each error to the existing .innerHTML rather than overwriting the existing:

document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
// note += instead of = here --------------^

Though can skip the loop altogether and just do this:

document.getElementById("error").innerHTML = "<li>"+errorMsg.join("</li><li>")+"</li>";

(The .join() method puts all the array elements into a string separated by the specified text.)

Also, if only some of your conditions are met your array will have undefined (missing) elements since you are explicitly setting specific indexes, which means you'll be adding <li> elements with "undefined" displayed in them. You should do this instead:

    errorMsg.push("Please Enter Full Name\n");
    // OR
    errorMsg[errorMsg.length] = "Please Enter Full Name\n";

...either of which will add to the end of the array. Then to test if there were any errors do:

if (errorMsg.length > 0)

Also the conditions in your if statements are all doing assignments because they use = where they should use === (or ==), and you are testing whether each field contains a single space: " " where I think you want to test if each field is empty by comparing to an empty string: "".

You have to use === or == instead of = in if statement.

That's because innerHtml of "error" always gets replaced.So only last value is showed.

Try below link

Is it possible to append to innerHTML without destroying descendants' event listeners?

= is the assignment operator. In your if statements, you must use equal to == or exactly equal to === (checks type also).

You also need to use the add to existing operator += in your statement listing:

if(document.getElementById("fullname").value == " "){
    errorMsg[0] = "Please Enter Full Name\n"
}
if(document.getElementById("street").value == " "){
    errorMsg[1]= "Please Enter Street Name\n"
}
if(document.getElementById("postcode").value == " "){
    errorMsg[2]= "Please Enter Postlecode\n"
}
if(document.getElementById("phone").value == " "){
    errorMsg[3]= "Please Enter Phone Number\n"
}
if(document.getElementById("email").value == " "){
    errorMsg[4]= "Please Enter Email Id\n"
}
for(var i=0;i<=errorMsg.length-1;i++){
    document.getElementById("error").innerHTML += "<li>"+errorMsg[i]+"</li>"
}  

I guess you can simply try appending the error message to label in each case.

Inserting in an array will put "undefined" value in an array. e.g If you put valid fullname then there won't be anything at errorMsg[0].If you put invalid street, errorMsg[1] will have an entry "Please Enter Street Name\n".

Now,when you are to submit the form, say with submit button you will get error message for invalid street but will get "undefined" for first place of an array.