Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

how to change textbox background color whenever validation fails using asp.net

Jan 29, 2011

Introduction:

 In this article I will explain how to change textbox background whenever validation fails using asp.net.

Description:
I have a one requirement like changing the textboxes background whenever validation fails at that time I used the custom validator and JavaScript function to validate textboxes and change the textboxes background color for that write the following code in your aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function changeColor(source, args) {
var txtuser = document.getElementById('txtUsername');
var txtpwd = document.getElementById('txtPwd');
var txtfname = document.getElementById('txtfname');
var txtlname = document.getElementById('txtlname');
var strimg = new Array();
strimg = [txtuser, txtpwd, txtfname, txtlname];
if (args.Value == "") {
args.IsValid = false;
document.getElementById(source.id.replace('cv','txt')).style.background = 'orange';
}
else {
args.IsValid = true;
document.getElementById(source.id.replace('cv', 'txt')).style.background = 'white';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td colspan="2">
<b>Change Background of Textbox</b>
</td>
</tr>
<tr>
<td>
UserName:
</td>
<td>
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<asp:CustomValidator ID="cvUsername" runat="server" SetFocusOnError="true" Display="Dynamic"
ValidateEmptyText="true" ControlToValidate="txtUsername" ClientValidationFunction="changeColor"> 
<img src="Images/error.gif" align="middle"/>Please enter UserName
</asp:CustomValidator>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>
<asp:CustomValidator ID="cvPwd" runat="server" SetFocusOnError="true" Display="Dynamic"
ValidateEmptyText="true" ControlToValidate="txtPwd" ClientValidationFunction="changeColor"> 
<img src="Images/error.gif" align="middle"/>Please enter Password
</asp:CustomValidator>
</td>
</tr>
<tr>
<td>
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
<asp:CustomValidator ID="cvfname" runat="server" SetFocusOnError="true" Display="Dynamic"
ValidateEmptyText="true" ControlToValidate="txtfname" ClientValidationFunction="changeColor"> 
<img src="Images/error.gif" align="middle"/>Please enter FirstName
</asp:CustomValidator>
</td>
</tr>
<tr>
<td>
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
<asp:CustomValidator ID="cvlname" runat="server" SetFocusOnError="true" Display="Dynamic"
ValidateEmptyText="true" ControlToValidate="txtlname" ClientValidationFunction="changeColor"> 
<img src="Images/error.gif" align="middle"/>Please enter LastName
</asp:CustomValidator>
</td>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" />
</td>
</tr>
</tr>
</table>
</div>
</form>
</body>
</html>
Here we need to observe one point that textbox name and customvalidator names should be similar because here I have taken username textbox value txtUsername’ and username custom validator name as ‘cvUsername’ in javascript function we have chance to get custom validator control name based on that I am simply replacing the cv with txt in javascript function and changing the textbox background color.
Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

4 comments :

Anonymous said...

Thanks!

rameshsrinivasan said...

this script is working fine in IE but not in Firefox. so how to get it in firefox too

Suresh Dasari said...

@rameshsrinivasan
i hope this is working in all the browsers. Still if you have problem check these posts

Display Validation Message with images
and
Highlight controls when validation fails

Anonymous said...

how to change the textbox and dropdown lists colors whenever validations fails which are defined in a multiview and when i am creating validations for 2nd multiview and using back button it is asking the current view validations

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.