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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s