Click here to Skip to main content
13,863,642 members
Click here to Skip to main content
Add your own
alternative version

Stats

27.9K views
434 downloads
14 bookmarked
Posted 23 Sep 2010
Licenced CPOL

Enhanced Validation and Extending ASP .NET Forms

, 23 Sep 2010
Rate this:
Please Sign up or sign in to vote.
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).

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

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

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

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

Share

About the Author

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

You may also be interested in...

Pro

Comments and Discussions

 
GeneralFeedback [modified] Pin
dale_burrell23-Jan-11 13:48
memberdale_burrell23-Jan-11 13:48 
Hi,

Great control, no doubt about it. It did exactly what I needed. During my development I came across a few little things which could be improved, or which in some cases I did improve.

1) I enhanced it to be able to apply the error CSS to an HtmlControl as well as a WebControl. I actually wanted to apply the error CSS to the containing DIV.

2) I did nearly have a problem with the fact that FindControl (to find the label) uses the parent of the validator whereas in one case my label was higher up the list than parent. Anyway I was able to move things around a bit as I couldn't see a clean solution to this with potentially searching in the entire form.

3) I enhanced this to allow the error CSS class to be added rather than replace the current class e.g. class="textfield" goes to class="textfield error" instead of class="error". In fact I didn't so much as enhance it, I changed it Smile | :) but it would be easy to allow this as an option.

4) Now for the biggest gotcha, if you have multiple validators on the same input field e.g. a requiredfield validator and a regularexpression validator (say for an email address). The first validator fails but because the second passes it applies the valid css class to it and it looks fine. I solved this in javascript by creating an array of invalid controls, and checked this array before setting a controls css to valid. I had to clear this array each time the validation way called. I'm in the middle of solving this for the server side - which I need for the custom control - haven't found a clear solution yet, planning to do something similar but with a static array. Problem comes with identifying different page instances since all requests will share the same static array. Also need to ensure that a given page clears itself out of the cache each time its loaded - which is a bit manual for my likng, but because there is no overall control to all the validators I can't see another way around this. So still thinking about this and would welcome any thoughts on how to solve it.

[edit]Further to the above I found a way to solve it server side using HttpContext.Current.Items as page scoped storage. So I store a list of invalid controls in Items and then check whether a given control has an invalid validator associated with it before clearing the error CSS. Looks to work so far.[/edit]

Of course I may have used this control incorrectly to cause the previous issues, if so please let me know. Happy to pass my code to anyone interested - but don't quite trust it enough to merge into the codeplex version.

Cheers,

Dale
modified on Monday, January 24, 2011 4:02 AM

GeneralRe: Feedback [modified] Pin
Ronald Partridge7-Oct-11 11:27
memberRonald Partridge7-Oct-11 11:27 
Generalcool.......... [modified] Pin
Pranay Rana22-Dec-10 0:33
professionalPranay Rana22-Dec-10 0:33 
GeneralCool, very like it! Pin
yaning_chn6-Dec-10 17:06
memberyaning_chn6-Dec-10 17:06 
GeneralExcellente! Pin
Cebocadence30-Sep-10 14:15
memberCebocadence30-Sep-10 14:15 
GeneralRe: Excellente! Pin
Ronald Partridge2-Oct-10 7:48
memberRonald Partridge2-Oct-10 7:48 
GeneralGreat control!!! Pin
Nuno Agapito23-Sep-10 15:01
memberNuno Agapito23-Sep-10 15:01 
GeneralMy vote of 5 Pin
Ronald Partridge23-Sep-10 13:22
memberRonald Partridge23-Sep-10 13:22 
GeneralRe: My vote of 5 Pin
Praveen Nair (NinethSense)23-Sep-10 17:55
memberPraveen Nair (NinethSense)23-Sep-10 17:55 
GeneralMy vote of 1 Pin
Praveen Nair (NinethSense)22-Sep-10 21:15
memberPraveen Nair (NinethSense)22-Sep-10 21:15 
GeneralRe: My vote of 1 Pin
Ronald Partridge23-Sep-10 8:40
memberRonald Partridge23-Sep-10 8: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190214.1 | Last Updated 23 Sep 2010
Article Copyright 2010 by Ronald Partridge
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid