Enhanced Validation and Extending ASP .NET Forms

• Download source - 222.05 KB
• Visit this project on codeplex.com at http://enhancedforms.codeplex.com/

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.