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

Change Background Color of Invalid Controls When Validation Fails using Asp.net Validator

Sep 24, 2015
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.

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

Output image of Change background color of invalid controls when validation fails using asp.net custom validator


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

0 comments :

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 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.