Featured On ...

asp.net

totalasp.co.uk

fuzzysoftware.com

devdex.com

123aspx.com

dotnetfreaks.com

411asp.net

and more ...

ASP.NET Validation Package Demos

The following set of ASP.NET Validation Package demos contain similarities that will be dealt with here rather than on the demo pages themselves. Firstly, the XML snippet below has been taken from the appSettings section of this site's web.config file:

<add key="validatorSummaryTitle" value="The follows errors occurred on the page:" />
<add key="validatorInitialHighlightClass" value="validatorInitial" />
<add key="validatorHighlightClass" value="validatorError" />
<add key="validatorDefaultHighlightElement" value="&lt;div[className=formInput]&gt;" />
<add key="validatorUseTicks" value="true" />
<add key="validatorJavascriptPath" value="/Controls/Validation/" />
<add key="validatorTickPath" value="/images/tick.gif" />
<add key="validatorCrossPath" value="/images/cross.gif" />
<add key="validatorDimCrossPath" value="/images/crossdim.gif" />

Each of the properties listed above can also be controlled on the Validator control's tag itself as well as programmatically. Any properties found on the tag override those found in the web.config file, and any properties overridden programmatically (for example in the Page_Load method) override those found on the Validator control's tag.

You'll notice that the client-side validation on each of these demos will highlight the area surrounding the field that is being validated when the validation for that field fails. The styles for this highlight are controlled by the InitialHighlightClass and the HighlightClass properties. When the field passes validation, the class on the "highlight element" returns to the class that the element had upon page load. In these demos, the HTML element on which the validation highlight takes place is marked by the signature <div[className=formInput]> (controlled through the property DefaultHighlightElement). This tells the validator to look for the next closest ansestor div that is higher in the HTML hierarchy than the field being validated and that has the initial class name formInput. In these demos, the highlight element is the one immediately preceeding the validated field.

The initial highlight class on each of the demos contains a big red asterisk. This is applied to the highlight element after the page has loaded when the field that it represents fails its initial validation (except during a postback). So in these demos, the asterisk does not strictly denote a required field. Once the field passes validation, the highlight field returns to its default state and the asterisk disappears. This probably isn't desirable in most situations. If in your own forms you would like such a required field marker to sit permanently beside the validated field, you'll have to simply place it there in the HTML or in the default class for the highlight element. Note that required field markers are not natively supported by the ASP.NET Validation Package.

Demo 1 - Non-server forms
This demonstration shows how the ASP.NET Validation Package can be used on standard, non-ASP.NET server forms and the fields contained within. go to demo

Demo 2 - Server forms using server controls
This demonstration shows how the ASP.NET Validation Package can be used ASP.NET server forms, WebControls and HtmlConrols. go to demo

Demo 3 - Multiple non-ASP.NET server forms
This demonstration shows how the ASP.NET Validation Package can be used with several non server forms on a single page. go to demo

Demo 4 - Multiple validation groups within an ASP.NET server form
This demonstration shows how the ASP.NET Validation Package can be used with multiple validation groups contained within a single ASP.NET server form. go to demo

Demo 5 - Customised validation summary
This demonstration shows how the validation summary can be customised as required. go to demo

Demo 6 - Mixed client-side and server-side only valdation
This demonstration shows how the ASP.NET Validation Package can be used with both client-side and server-side only validation. go to demo

Demo 7 - Most validators
This demonstration shows almost all of the validators that come with the ASP.NET Validation Package in action. In addition to the validators themselves, this demonstration also includes a number of features that were first introduced in the upcoming 1.3 release of the validation package. go to demo

Demo 8 - More validators
This demonstration shows several of the validators available with the ASP.NET Validation Package and how they can be used with various field or control types. Like Demo 7, this page contains a number of features that were first introduced in the 1.3 release of the validation package. Included in the release are inline message functions, which allow developers to embed properties into the message text. go to demo

Demo 9 - Individual client-side disabling
This demonstration shows how to disable the client-side code on individual validators. go to demo

© 2002 - 2008 Copyright, Disclaimer and Privacy Statement