Return to the menu Select another DES Module

Demonstrates various ways to format the error messages

The body of the ValidationSummary shows a list of the error messages from validators reporting errors. The text of these messages comes from the Validators, either in the SummaryErrorMessage or ErrorMessage property, whichever is defined.

Use the DisplayMode property to format the error messages:

None - The error messages are omitted. Typically you use this when you want to only show an instruction to fix errors in the HeaderText property.
BulletList - The error messages are shown using the <ul> or <ol> tags for formatting. The BulletListType property determines the type attribute for the <ul> or <ol> tags.
List - Each error message is shown on a separate line, optionally preceded by an image in the ListLeadImageURL property and text in the ListLeadText property. You can add any HTML between the items with the ListRowSeparator.
SingleParagraph - Error messages are concatenated, with the SingleParagraphSeparator property providing a separator character. They word-wrap at the overall width of the control.
Table - The error messages are formatted in a one column table, where each error message gets its own row. Initially, this doesn’t appear to be much different from the List style (which uses <br /> tags to separate error messages). However, with table cells, you can apply a different style sheet to even and odd rows. This allows for different backgrounds on alternating rows. You can also use the styles to include a border, such as a top border on each row or to change the justification of error messages (for example, centering them).
Normally each row uses the style sheet class of "DESValSummaryErrors". The alternating row uses the style sheet class of "DESVALSummaryAltRows". Both are declared in the [webapp]\DES\Appearance\Validation\Validation.css file.

Make it easier for the user to locate the field with an error by setting HyperLinkToFields to true. Each error message will become a hyperlink that when clicked, moves the focus to the control with the error.

Controls

Here are examples of each DisplayMode where 3 error messages are displayed.
Leave the textboxes blank and click Submit to see 3 errors. Various DisplayMode settings are shown below.
First Name: Required
Last Name: Required
Postal Code: Required

DisplayMode=None

Only shows the HeaderText

DisplayMode=BulletList, AlphaCharsLowercase

DisplayMode=BulletList, Circle

DisplayMode=BulletList, Numbers

DisplayMode=BulletList, RomanNumeralsUppercase

DisplayMode=List

DisplayMode=List, ListLeadText=">>"

The AltLead

DisplayMode=List, ListRowSeparator="<hr />"

DisplayMode=List, ListLeadImageURL

DisplayMode=SingleParagraph

DisplayMode=SingleParagraph, SingleParagraphSeparator="---"

DisplayMode=Table

DisplayMode=Table, TableAltRowCssClass="DESVALSummaryAltRows"

HyperLinkToFields

Click on the error messages to jump to the field with the error.

Source Code (C#)

<script runat="server">
   protected void Button1_Click(object sender, EventArgs e)
   {
      if (PeterBlum.DES.Globals.WebFormDirector.IsValid)
      {
         // save your data here
      }
   }
   
</script>

Here are examples of each <span class="PropertyName">DisplayMode</span> where 3 error messages are displayed.<br/>
Leave the textboxes blank and click Submit to see 3 errors. Various <span class="PropertyName">DisplayMode</span> settings are shown below.<br/>
First Name: <asp:TextBox ID="TextBox1" runat="server" />
<des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" ControlIDToEvaluate="TextBox1"
   ErrorMessage="Required" SummaryErrorMessage="First Name is required">
</des:RequiredTextValidator>
<br/>
Last Name: <asp:TextBox ID="TextBox2" runat="server" />
<des:RequiredTextValidator ID="Requiredtextvalidator2" runat="server" ControlIDToEvaluate="TextBox2"
   ErrorMessage="Required" SummaryErrorMessage="Last Name is required">
</des:RequiredTextValidator>
<br/>
Postal Code:<asp:TextBox ID="TextBox3" runat="server" />
<des:RequiredTextValidator ID="Requiredtextvalidator3" runat="server" ControlIDToEvaluate="TextBox3"
   ErrorMessage="Required" SummaryErrorMessage="Postal Code is required">
</des:RequiredTextValidator>
<br/>
<des:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click"></des:Button>
<hr/>
<br/>
<h2>DisplayMode=None</h2>
Only shows the HeaderText<br/><br/>
<des:ValidationSummary ID="ValidationSummary1" runat="server" 
   DisplayMode="None" HeaderText="Fix the errors" />
<br/>
<br/>
<h2>DisplayMode=BulletList, AlphaCharsLowercase</h2>
<des:ValidationSummary ID="ValidationSummary2" runat="server" 
   DisplayMode="BulletList"
   BulletListType="AlphaCharsLowercase" />
<br/>
<br/>
<h2>DisplayMode=BulletList, Circle</h2>
<des:ValidationSummary ID="ValidationSummary3" runat="server" 
   DisplayMode="BulletList"
   BulletListType="Circle"/>
<br/>
<br/>
<h2>DisplayMode=BulletList, Numbers</h2>
<des:ValidationSummary ID="ValidationSummary4" runat="server" 
   DisplayMode="BulletList"
   BulletListType="Numbers" />
<br/>
<br/>
<h2>DisplayMode=BulletList, RomanNumeralsUppercase</h2>
<des:ValidationSummary ID="ValidationSummary5" runat="server" 
   DisplayMode="BulletList"
   BulletListType="RomanNumeralsUppercase"/>
<br/>
<br/>
<h2>DisplayMode=List</h2>
<des:ValidationSummary ID="ValidationSummary6" runat="server" 
   DisplayMode="List" />
<br/>
<br/>
<h2>DisplayMode=List, ListLeadText=">>"</h2>
The AltLead
<des:ValidationSummary ID="ValidationSummary7" runat="server" 
   DisplayMode="List"
   ListLeadText="&gt;&gt;"/>
<br/>
<br/>
<h2>DisplayMode=List, ListRowSeparator="<hr />"</h2>
<des:ValidationSummary ID="ValidationSummary8" runat="server" 
   DisplayMode="List"
   ListRowSeparator="<hr />"/>
<br/>
<br/>
<h2>DisplayMode=List, ListLeadImageURL</h2>
<des:ValidationSummary ID="ValidationSummary9" runat="server" 
   DisplayMode="List"
   ListLeadImageURL="~/DES/Appearance/Shared/BlueDot.gif"/>
<br/>
<br/>
<h2>DisplayMode=SingleParagraph</h2>
<des:ValidationSummary ID="ValidationSummary10" runat="server" 
   DisplayMode="SingleParagraph" />
<br/>
<br/>
<h2>DisplayMode=SingleParagraph, SingleParagraphSeparator="---"</h2>
<des:ValidationSummary ID="ValidationSummary11" runat="server" 
   DisplayMode="SingleParagraph"
   SingleParagraphSeparator="---"/>
<br/>
<br/>
<h2>DisplayMode=Table</h2>
<des:ValidationSummary ID="ValidationSummary12" runat="server" 
   DisplayMode="Table"
   Width="300px" TableAltRowCssClass=""/>
<br/>
<br/>
<h2>DisplayMode=Table, TableAltRowCssClass="DESVALSummaryAltRows"</h2>
<des:ValidationSummary ID="ValidationSummary13" runat="server" 
   DisplayMode="Table"
   Width="300px" TableAltRowCssClass="DESVALSummaryAltRows"/>
<br/>
<br/>
<h2>HyperLinkToFields</h2>
Click on the error messages to jump to the field with the error.<br/><br/>
<des:ValidationSummary ID="ValidationSummary14" runat="server" 
   HyperLinkToFields="true"/>
<br/>

Return to the menu Select another DES Module