Introduction:
Here I will explain how to change background color of invalid controls when validation fails using asp.net validators. By using custom validators in asp.net we can change background color of textbox controls when validation fails.
Description:
In previous articles I explained create read cookies in asp.net with example, jQuery send receive json objects from web service in asp.net, Asp.net mvc project example with demo, show multiple markers in google map from database in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to change background color of invalid controls when validation fails using asp.net custom validators with example.
In previous articles I explained create read cookies in asp.net with example, jQuery send receive json objects from web service in asp.net, Asp.net mvc project example with demo, show multiple markers in google map from database in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to change background color of invalid controls when validation fails using asp.net custom validators with example.
To
change background of invalid controls in asp.net open your aspx page
and write the following code
<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 = 'red';
}
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.png"
width="25px"
height="25px"/>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.png"
width="25px"
height="25px"/>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.png"
width="25px"
height="25px"/>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.png"
width="25px"
height="25px"/>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>
|
After completion of aspx page code run and check output that
would like as shown below
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
|
|||
0 comments :
Note: Only a member of this blog may post a comment.