Thursday 20 October 2011

how to change textbox background color whenever validation fails using asp.net(custom validator)

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.