html - Javascript validation form with no alert() -

im trying build html form validate if user entering values in each of input boxes. far i've found in google examples when user leaves input box blank call alert() annoying users if have fill 10 boxes , accident hit submit have close 10 alerts. thinking if possible show red message next empty box(es) indicating boxes empty. here code showing alerts:

<form name="examentry" method="post">     <input type="text" id="name" name="name" />     <input type="text" id="subject" name="subject" />     <input type="text" id="examnumber" name="examnumber" />     <input type="submit" name="submit" value="submit" onlick="return validateform()" /> </form> 

javascript:

function validateform(){     var result = true;     var msg = "";      if(document.examentry.name.value==""){         msg+="you must enter name \n";         document.examentry.name.focus();         document.getelementbyid('name').style.color="red";         result = false;     }      if(document.examentry.subject.value==""){         msg+="you must enter subject \n";         document.examentry.subject.focus();         document.getelementbyid('subject').style.color="red";         result = false;     }      if(document.examentry.examnumber.value=="")     {         msg+="you must enter examination number \n";         document.examentry.examnumber.focus;         document.getelementbyid('examnumber').style.color="red";         result = false;     }      if(document.examentry.examnumber.value.length!=4)     {         msg+="your examination number must 4 characters long \n";         document.examentry.examnumber.focus;         document.getelementbyid('examnumber').style.color="red";         result = false;     }      var lvlmsg="";     for(var i=0; < document.examentry.level.length; i++)         {             if(document.examentry.level[i].checked)             {                 lvlmsg = document.examentry.level[i].value;                 break;             }         }     if(lvlmsg=="")         {             msg+="you must indicate level";             result=false;             document.getelementbyid('radiobuttons').style.color="red";         }     else         {             alert(lvlmsg);         }      if(msg==""){         return result;     }     else{         alert(msg);         return result;     } } 

any ideas?

create span element after each input:

<form name="examentry" method="post">     <input type="text" id="name" name="name" /><span id="name-msg"></span>     <input type="text" id="subject" name="subject" /> <span id="subject-msg"></span>     <input type="text" id="examnumber" name="examnumber" /> <span id="examnumber-msg"></span>     <input type="submit" name="submit" value="submit" onlick="return validateform()" /> </form> 

then instead of doing this:

msg+="you must indicate level"; 

do:

var msg = document.createtextnode("you must indicate level"); document.getelementbyid('name-msg').appendchild(msg); 

and don't forget remove alerts!