Click here to Skip to main content
15,867,756 members
Articles / Web Development / ASP.NET

Enhanced Validation and Extending ASP .NET Forms

Rate me:
Please Sign up or sign in to vote.
4.80/5 (4 votes)
23 Sep 2010CPOL4 min read 33.6K   439   14   11
Enhances your ASP.NET forms with fancy highlighting and combining validation groups

Describing the Problem

ASP.NET out of the box controls do work for what they are supposed to achieve, but since .NET 2.0 the websites have become more sophisticated and fancy. If you want a really nice looking form with some flare, ASP.NET controls by default will not give you that. I think it’s helpful when a user who browses a website can see exactly where the error is on the form by changing some CSS styles around on the form elements and labels.

Some forms are just way too large and need to be broken out into steps. Breaking the form up into small pieces does not overwhelm the user who is entering in the information and gives you a better sign-up success rate. To add some flare, I thought it would be fun to come up with a way to do this on a single page.

How to Use the Solution

Just add the enhanced forms library to your solution or you can simply copy the RDC.EhancedForm.dll file to your bin directory and don't forget to copy Newtonsoft.Json.Net20.dll as well which encodes .NET objects to JSON so you can easily read data from your objects in JavaScript. If you want to use the Button control, you will need to have JQuery being loaded into your web page. The JQuery library provides the smooth fade in effects for the different part(s) of the form you wish to break up. Finally under <pages><controls> in your web.config file, add the following line:

Load the DLL (EnhancedForms Library).

XML
...
<pages>
 <controls>
  <add tagPrefix="ef" assembly="RDC.EnhancedForm" namespace="RDC.EnhancedForm" />
 </controls>
</pages>
...   

I have included a complete working sample which uses the enhanced forms library. The sample also demonstrates the uses of CSS3. Everything is rendered without additional graphic images. I have also posted a demo online at http://www.ronald-douglas.com/Projects.

About the Code

Once you have everything loaded, we can start to take a look at the code. The controls operate and provide the exact same functionality as the out of the box ASP.NET controls, but have further functionality.

Let's look at a textbox control:

HTML
<ef:TextBox ID="txtEmail"
    runat="server"
    Width="200px"
    CssClass="inputText"
    ClientFocusCssClass="inputTextFocus"
    ClientFocusLabel="lblEmail"
    ClientFocusLabelCssClass="labelTextFocus">
</ef:TextBox>  

You will see three new properties which are not part of the regular ASP.NET textbox control:

  • ClientFocusCssClass - The CSS to apply when the field is in focus
  • ClientFocusLabel - The label to apply a style to when the field is in focus
  • ClientFocusLabelCssClass - The CSS which applies the label when the field is in focus

These three new fields create an interesting effect which shows exactly what part of the form you are working with. The label having its CSS changed when the textfield is in focus may be overkill, but it gives some nice flare to your forms.

HTML
<ef:RequiredFieldValidator ID="vld_txtEmail" runat="Server"
    ControlToValidate="txtEmail" 
    ErrorMessage="Please enter your e-mail address."
    ToolTip="Please enter your e-mail address."
    Display="None"

    ControlErrorCssClass="inputTextError"
    ControlLabel="lblEmail"
    ControlLabelErrorCssClass="formLabelError"

    ValidationGroup="register1" /> 

You will see three new attributes which are not part of the regular ASP.NET RequiredFieldValidator control:

  • ControlErrorCssClass - The CSS to apply when the field contains an error
  • ControlLabel - The label to apply a style to when the field contains an error
  • ControlLabelErrorCssClass - The CSS which applies the label when the field is in error

These three new fields apply the same CSS transitions when the field contains an error. Also the CSS for both the label and the textfield is remembered if you focus in and focus out.

The most fun part is breaking up the form into small chunks. When a user fills out part of the form, the next part of the form is revealed to them. The custom button control takes care of this part.

HTML
<ef:Button ID="btnSubmit" 
    runat="server" 
    Text="Continue"
    onclick="btnSubmit_Click" 
    CssClass="defaultButton"
    ValidationGroupStepping="true"
    ValidationGroupOrder="register1=formGroup2, register2=formGroup3"
    ValidationGroupEnd="register3" /> 

If you look at the demonstration file (FormDemo1.aspx), you will see that each form section contains its own validation group. The last two parts of the form are hidden with 'display: none'. This control would behave exactly the same as a regular ASP.NET button until you enter data into the three new properties:

  • ValidationGroupStepping - Tell the button to step through all validation groups
  • ValidationGroupOrder - The order in which we step through validation groups and the form part(s) to reveal
  • ValidationGroupEnd - The last registration group to process
HTML
register1=formGroup2, register2=formGroup3 

This means that once validation group register1 passes, fromGroup2 will be displayed and the user can fill out the next part of the form and so on. In the enhanced form library project, take a look at EnhancedClientButton.js.

To download the library and example, visit http://www.ronald-douglas.com/Projects.

If you are interested in helping this library grow, you can contact me at http://www.ronald-douglas.com/Contact.

Visit this project on codeplex.com at http://enhancedforms.codeplex.com/.

Inspiration

A thank you goes out to Alexander Kleshchevnikov who inspired me to write this article. His work was the foundation for my Library. I came across his article a few years ago and decided to make something much more powerful and complete to share.

You can view his original article at  http://www.codeproject.com/KB/validation/highlight_validators.aspx.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Ronald Douglas Consulting
Canada Canada
Ronald began his career over 10 years ago when Windows 95 dominated the PC. He has participated in projects in various industries such as media, advertising, finance, insurance, retail / wholesale and much more. Ron is always exploring multiple programming platforms to bring better solutions to organizations using a very custom approach based on requirements, workplace culture and existing IT infrastructure. Ron thoroughly understands mainstream platforms: .NET, (Java) JEE, PHP and industry leading frameworks and has experience with some other uncommon frameworks such as Groovy / Grails. Because his skill set is so diverse, he can make excellent technology recommendations and address business impacts and liabilities. Ronald also enjoys working with sales and marketing teams to leverage solutions which create new revenue.

See his company and website: http://www.ronald-douglas.com

Comments and Discussions

 
GeneralFeedback [modified] Pin
dale_burrell23-Jan-11 12:48
dale_burrell23-Jan-11 12:48 
GeneralRe: Feedback [modified] Pin
Ronald Partridge7-Oct-11 10:27
Ronald Partridge7-Oct-11 10:27 
Generalcool.......... [modified] Pin
Pranay Rana21-Dec-10 23:33
professionalPranay Rana21-Dec-10 23:33 
GeneralCool, very like it! Pin
yaning_chn6-Dec-10 16:06
yaning_chn6-Dec-10 16:06 
GeneralExcellente! Pin
Cebocadence30-Sep-10 13:15
Cebocadence30-Sep-10 13:15 
GeneralRe: Excellente! Pin
Ronald Partridge2-Oct-10 6:48
Ronald Partridge2-Oct-10 6:48 
GeneralGreat control!!! Pin
Nuno Agapito23-Sep-10 14:01
Nuno Agapito23-Sep-10 14:01 
GeneralMy vote of 5 Pin
Ronald Partridge23-Sep-10 12:22
Ronald Partridge23-Sep-10 12:22 
GeneralRe: My vote of 5 Pin
Praveen Nair (NinethSense)23-Sep-10 16:55
Praveen Nair (NinethSense)23-Sep-10 16:55 
GeneralMy vote of 1 Pin
Praveen Nair (NinethSense)22-Sep-10 20:15
Praveen Nair (NinethSense)22-Sep-10 20:15 
GeneralRe: My vote of 1 Pin
Ronald Partridge23-Sep-10 7:40
Ronald Partridge23-Sep-10 7:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.