Change TextBox Color in Asp.Net when Validation Failed Using JavaScript.

• Paste this into page head section of aspx page

<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>

• design your aspx page

<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>

Now simple run your application and without filling the name password click on button & see the results.