Change background color of a control when validation fails in ASP.NET:

This article explains how to change background color of a control when Validation fails in a webpage using ASP.NET.

Defauls.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

body

{

font-family: Verdana;

font-size: 12pt;

}

.Error

{

background-color: Red;

border: solid 1px Red;

}

</style>

</head>

<body>

<form id="FormControl" runat="server">

<div>

UserName:

<asp:TextBox ID="txtUname" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="txtUname" ErrorMessage="Please enter username">

</asp:RequiredFieldValidator>

<br /><br />

Password:

<asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="rfv3" runat="server" ControlToValidate="txtPwd" ErrorMessage="Please enter password">

</asp:RequiredFieldValidator>

<br /><br />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" />

</div>

</form>

<script type="text/javascript">

function WebForm_OnSubmit()

{

if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)

{

for (var i in Page_Validators)

{

try

{

var control = document.getElementById(Page_Validators[i].controltovalidate);

if (!Page_Validators[i].isvalid)

{

control.className = "Error";

}

else

{

control.className = "";

}

}

catch (e) { }

}

return false;

}

return true;

}

</script>

</body>

</html>

Output

1.png

After validation fails

2.png