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
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).
<add tagPrefix="ef" assembly="RDC.EnhancedForm" namespace="RDC.EnhancedForm" />
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
You will see three new properties which are not part of the regular ASP.NET
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"
ErrorMessage="Please enter your e-mail address."
ToolTip="Please enter your e-mail address."
You will see three new attributes which are not part of the regular ASP.NET
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.
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
This means that once validation group
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/.
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.