Enhanced Validation and Extending ASP .NET Forms

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

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

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.