Validation Highlighter Component for Microsoft ASP.NET Web Forms by William Chang

The validation highlighter extends the validation server controls for Microsoft ASP.NET Web Forms. When the user inputs data into one of the form fields, the validation highlighter will detect or trigger by the ASP.NET validation server control. The component will add or remove the CSS class to the form field if the input is valid or invalid.

Supported browsers: Microsoft Internet Explorer 6+, Mozilla Firefox 3+, Apple Safari 3+, Google Chrome 1+

Features

• Easy and simple to apply to web page.
• Customizable through settings and CSS.

API and Options

You can pass options as key/value object to the component's function.

Usage

1. Include required dependencies.

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/wc_aspnetvalidationhighlighter.js" type="text/javascript"></script>
	

2. Add required markup structure using HTML.

<asp:label associatedcontrolid="txtName" runat="server">Name</asp:label>
<br/>
<asp:textbox id="txtName" width="192px" cssclass="txtcommon" runat="server"/> 
<br/>
<asp:requiredfieldvalidator id="rfvName" controltovalidate="txtName" errormessage="This field is required." display="dynamic" cssclass="error" forecolor="" runat="server"/>
<br/>
<asp:button id="btnSubmit" runat="server" text="Submit" cssclass="btnsubmit" onclick="btnSubmit_Click"/>
	

3. Add required style using CSS.

.error_field {background-color:#ffbcbc;color:#000;}
	

4. Add and run the code using JavaScript.

$.wc_aspnetvalidationhighlighter({
	strFieldErrorCss:'error_field'
});
	

Downloads

• jquery.js
• wc_aspnetvalidationhighlighter.js

Created by William Chang