HightLight Error Message In JavaScript

Steps:

1) create simple web application (here i am use the asp.net 2.0).

2) In that application put the below code in the designer view.

<table>
<tr>
<td>
Enter User Name
</td>
<td>
<asp:TextBoxID=”txtUserName”runat=”server”onblur=”return HighLightErrorMsg(this.id,’lblUserError’,'red’);”></asp:TextBox></td>
<td>
<divstyle=”visibility: hidden; background-color: Red; width: 200px;”id=”lblUserError”>
Please Enter UserName
</div>
</td>
</tr>
<tr>
<td>
Enter Password
</td>
<td>
<asp:TextBoxID=”txtPassword”runat=”server”onblur=”return HighLightErrorMsg(this.id,’lblPassword’,'red’);”></asp:TextBox>
</td>
<td>
<divstyle=”visibility: hidden; background-color: Red; width: 200px;”id=”lblPassword”>
Please Enter Password
</div>
</td>
</tr>
<tr>
<tdcolspan=”2″>
<center>
<asp:ButtonID=”btnSubmit”runat=”server”OnClick=”btnSubmit_Click”Text=”Submit”
OnClientClick=”return CheckControl();” />
</center>
</td>
</tr>
</table>

3) In that page write below javascript.

<script language="javascript">

  function CheckControl()
{
//get the id of username textbox
var objUserName=document.getElementById('txtUserName').id;
//get the id of username error message
var objUserError =document.getElementById('lblUserError').id;
//get the id of password textbox
var objPassword =document.getElementById('txtPassword').id;
//get the id of password error message
var objPasswordError =document.getElementById('lblPassword').id;
//check control and highlight message
if(HighLightErrorMsg(objUserName,objUserError,'red' )==false)
{
return false;
}
else if(HighLightErrorMsg(objPassword,objPasswordError,'red')==false)
{
return false;
}
return true;
}

//id-->control to validate
//errorid --> div to display error message
//color --> error color
function HighLightErrorMsg(id,errorid,color)
{
//check the control value
if(document.getElementById(id).value !="")
{
//hide the error message
document.getElementById(errorid).style.visibility ="hidden";
return true;
}
var bkcolor=color;
if(bkcolor=='red')
bkcolor ='green';
else
bkcolor ='red';
//set the background color
document.getElementById(errorid).style.backgroundColor =bkcolor;
//visibility set
document.getElementById(errorid).style.visibility ="visible";
//if error at that time focus on the particular control
document.getElementById(id).focus();
//every 5 sec call and change the background color
window.setTimeout("HighLightErrorMsg('"+ id + "','"+ errorid +"','"+bkcolor+"');",500);
return false;
}

</script>

Thanks