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+



Page Time (24-hour): Refresh This Page

Demo not available. This web server does not support Microsoft ASP.NET Web Forms.

API and Options

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

Key Type Default Value Description
strFieldErrorCss string error_field When a form field is valid or invalid, the component add or remove the CSS class. Requires a CSS class name.


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>
<asp:textbox id="txtName" width="192px" cssclass="txtcommon" runat="server"/> 
<asp:requiredfieldvalidator id="rfvName" controltovalidate="txtName" errormessage="This field is required." display="dynamic" cssclass="error" forecolor="" runat="server"/>
<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.



Created by William Chang

W3C XHTML Compliant W3C CSS Compliant