Introduction:
In this article I will explain how to change textbox background whenever validation fails using asp.net.
Description:
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 Email
|
|||
|
|
4 comments :
Thanks!
this script is working fine in IE but not in Firefox. so how to get it in firefox too
@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
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