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

By: Suresh Dasari 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

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>

<div>

<table>

<tr>

<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>

</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 Email

4 comments :

Anonymous said...: Thanks!; February 9, 2011 at 11:18 AM
rameshsrinivasan said...: this script is working fine in IE but not in Firefox. so how to get it in firefox too; September 7, 2011 at 2:39 AM
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; December 27, 2011 at 12:49 AM
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; January 6, 2013 at 9:23 AM