JQuery Highlight border and background color of form controls when validation fails in asp.net

Posted by imomins on October 8, 2012 at 12:50 AM

In this article I will explain how to highlight or change background and border color of form controls when validation fails in asp.net using JQuery.

In previous articles I explained about Display validation error messages with images and Change textbox background when validation fails and Ajax Password Strength using asp.net . Now I will explain how to highlight form controls when validation fails using JQuery in asp.net.

In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are highlighting controls and changing the background color of controls. We can implement this functionality easily by using available JQuery plugins.
First open Visual Studio and create new website after that right click on your website and add new folder and give name as JS and insert script files in folder you should get it from attached folder. After that write the following code in your aspx page 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Highlight page controls when validation fails in asp.net</title>
<script src="JS/jquery.js" type="text/javascript"></script>
<script src="JS/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="JS/jquery.maskedinput.js"></script>
<script type="text/javascript" src="JS/mktSignup.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<form runat="server" >
<table cellpadding="0" cellspacing="0" border="0" align="center">
<h2>Billing Information</h2>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" class="subTableDiv">
<table cellpadding="0" cellspacing="0" border="0">
<td class="label">First Name:</td>
<td class="field"><asp:TextBox ID="firstname" CssClass="ValidationRequired" runat="server"/></td>
<td class="label">Last Name:</td>
<td class="field"><asp:TextBox ID="lastname" CssClass="ValidationRequired" runat="server"/></td>
<td class="label">Email:</td>
<td class="field"><asp:TextBox ID="email" runat="server"  CssClass="ValidationRequired email"/>
<div class="formError"></div>
<td class="label">Address:</td>
<td class="field"><asp:TextBox ID="bill_address1" runat="server"  CssClass="ValidationRequired"/></td>
<td class="label"></td>
<td class="field"><asp:TextBox ID="bill_address2" runat="server" CssClass="ValidationRequired"/></td>
<td class="label">City:</td>
<td class="field"><asp:TextBox ID="bill_city" runat="server" CssClass="ValidationRequired"/></td>
<td class="label">State:</td>
<td class="field">
<asp:DropDownList ID="ddlState" runat="server" CssClass="ValidationRequired">
<asp:ListItem value="">Choose State</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem  value="AL">Alabama </asp:ListItem>
<asp:ListItem  value="AK">Alaska</asp:ListItem>
<asp:ListItem  value="AZ">Arizona</asp:ListItem>
<asp:ListItem  value="AR">Arkansas</asp:ListItem>
<asp:ListItem  value="CA">California</asp:ListItem>
<asp:ListItem  value="CO">Colorado</asp:ListItem>
<asp:ListItem  value="CT">Connecticut</asp:ListItem>
<asp:ListItem  value="DE">Delaware</asp:ListItem>
<asp:ListItem  value="FL">Florida</asp:ListItem>
<asp:ListItem  value="GA">Georgia</asp:ListItem>
<asp:ListItem  value="HI">Hawaii</asp:ListItem>
<asp:ListItem  value="ID">Idaho</asp:ListItem>
<td class="label">Zip:</td>
<td class="field">
<asp:TextBox ID="txtZip" runat="server" CssClass="ValidationRequired zipcode"/>
<td class="label">Phone:</td>
<td class="field">
<asp:TextBox ID="txtPhone" runat="server" CssClass="ValidationRequired phone"/>
<td class="label">Credit Card Type:</td>
<td class="field">
<asp:DropDownList ID="ddlCardType" runat="server" CssClass="ValidationRequired">
<asp:ListItem Value="">Choose Credit Card</asp:ListItem>
<asp:ListItem value="amex">American Express</asp:ListItem>
<asp:ListItem value="discover">Discover</asp:ListItem>
<asp:ListItem value="mastercard">MasterCard</asp

Categories: JQUERY, ASP.NET, C#

Post a Comment


Oops, you forgot something.


The words you entered did not match the given text. Please try again.

You must be a member to comment on this page. Sign In or Register