Return to the menu Select another DES Module

Introduction to the ValidationSummary

The ValidationSummary control displays all errors on the page when the page is submitted. It is hidden until the user submits the page and errors are found. It consolidates the errors into one area. (The Validator controls still report their errors unless you elect to hide them.)

You can have several ValidationSummary controls on the page to show the same error information above and below the form fields. Or you may have different groups of fields, each with its own ValidationSummary control.

By default, the ValidationSummary control shows the same error message as shown on the Validator control reporting the error. However, you can specify a second error message on each Validator control, in the SummaryErrorMessage property to provide a different error description in the ValidationSummary control. For example, when your Validator’s error message is “This field requires an entry”, that text is ambiguous when shown in a list of errors. Provide the error “The FieldName field requires an entry” in the SummaryErrorMessage.

This page uses the fields below to establish the error messages for each validation summary shown in the various examples below.

Controls

Start by clicking the Submit button below to display the ValidationSummary.

There are errors

First name
Age

The default ValidationSummary

The default ValidationSummary control lacks a header and uses bullets to show error messages. Notice that the error messages are slightly different from those shown next to the fields. Each Validator control allows you to supply a unique error message for the ValidationSummary. That message supports tokens and token style sheet features.

Adding content, formatting, and style

This ValidationSummary includes a header and footer. It uses the paragraph style to show error messages. The header includes an image. Unlike the header on Microsoft's ValidationSummary, you can format the image and the text of the header as properties without encoding the HTML yourself. Colors, borders, and width properties have also been set.

More Detail

Making it interactive and assist the user

This looks like the default ValidationSummary. However, it has three unique properties:

It shows hyperlinks on the error messages by setting the HyperLinkToFields property to true.
Click on them to jump to the textbox with the error.
It causes another field on the page to show with the RelatedControlID property. In this case, it is a Label control with the text "There are errors" just above the textboxes.
As you fix the errors above, it immediately refreshes to show the impact of your edits with the AutoUpdate property.

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>

<em>Start by clicking the Submit button below to display the ValidationSummary.</em><br/><br/>
<asp:Label ID="WarningLabel" runat="server" ForeColor="Red">There are errors</asp:Label><br/>
<table>
   <tr>
      <td>
         <asp:Label ID="Label1" runat="server">First name</asp:Label>
      </td>
      <td>
         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      </td>
      <td>
         <des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" 
            ControlIDToEvaluate="TextBox1"
            ErrorMessage="This field is required" Label-LabelControlID="Label1" 
            SummaryErrorMessage="Please fill in {LABEL}.">
            <ErrorFormatterContainer>
               <des:TextErrorFormatter Display="Dynamic"></des:TextErrorFormatter>
            </ErrorFormatterContainer>
         </des:RequiredTextValidator>
      </td>
   </tr>
   <tr>
      <td>
         <asp:Label ID="Label2" runat="server">Age</asp:Label>
      </td>
      <td>
         <asp:TextBox ID="TextBox2" runat="server" Width="61px">abc</asp:TextBox>
      </td>
      <td>
         <des:DataTypeCheckValidator ID="DataTypeCheckValidator1" runat="server" 
            ControlIDToEvaluate="TextBox2"
            ErrorMessage="Enter an integer" Label-LabelControlID="Label2" 
            SummaryErrorMessage="Enter an integer into {LABEL}."
            DataType="Integer">
            <ErrorFormatterContainer>
               <des:TextErrorFormatter Display="Dynamic"></des:TextErrorFormatter>
            </ErrorFormatterContainer>
         </des:DataTypeCheckValidator>
      </td>
   </tr>
</table>
<des:Button ID="Button1" runat="server" Text="Submit"></des:Button> 
<input type="reset" value="Reset" /><br/><br/>
<h2>The default ValidationSummary</h2>
<p>
   The default ValidationSummary control lacks a header and uses bullets to show
   error messages. Notice that the error messages are slightly different from those
   shown next to the fields. Each Validator control allows you to supply a unique error
   message for the ValidationSummary. That message supports 
   <a href="../Validators/Formatting/Understanding ErrorMessages.aspx#tokens" >tokens and token style sheet features</a>.
</p>
<des:ValidationSummary ID="ValidationSummary1" runat="server"></des:ValidationSummary>
<br/>
<h2>Adding content, formatting, and style</h2>
<p>
   This ValidationSummary includes a header and footer. It uses the paragraph style
   to show error messages. The header includes an image. Unlike the header on Microsoft's
   ValidationSummary, you can format the image and the text of the header as properties
   without encoding the HTML yourself. Colors, borders, and width properties have also
   been set.
</p>
<des:ValidationSummary ID="Validationsummary2" runat="server" Width="300px" DisplayMode="SingleParagraph"
   HeaderText="Please fix these errors" HeaderImageURL="{APPEARANCE}/Validation/valerroricon_animated.GIF"
   HeaderImageColumnWidth="20px" FooterText="<br />The page will not submit until these are corrected."
   BorderStyle="Dashed" BorderColor="RosyBrown" BorderWidth="4px" BackColor="SeaShell">
</des:ValidationSummary>
<br/>
<div class="ClickForMoreContainer" style="text-align:center;width:1000px;">
  <asp:HyperLink id="ComplexDemoLink" runat="server" NavigateUrl="Various Formatting.aspx" CssClass="ClickForMore">
      More Detail 
  </asp:HyperLink>
</div>
<h2>Making it interactive and assist the user</h2>
<p>
   This looks like the default ValidationSummary. However, it has three unique properties:
</p>
<ul type="circle" class="BulletsToLeft">
   <li>It shows hyperlinks on the error messages by setting the 
      <asp:HyperLink id="HyperLinkToFieldsLink" runat="server" 
         NavigateUrl="DisplayMode.aspx#HyperLinkToFields" CssClass="PropertyName" Text="HyperLinkToFields" />
      property to true.<br/>
      Click on them to jump to the textbox with the error.</li>
   <li>It causes another field on the page to show with the 
      <asp:HyperLink id="RelatedControlIDLink" runat="server" 
         NavigateUrl="RelatedControlID.aspx" CssClass="PropertyName" Text="RelatedControlID" />
      property. In this case, it is a Label control
      with the text "There are errors" just above the textboxes.<br/>
      
      </li>
   <li>As you fix the errors above, it immediately refreshes to show the impact of your edits
      with the  <asp:HyperLink id="WhenToDisplayLink" runat="server" 
            NavigateUrl="When To Display.aspx" CssClass="PropertyName" Text="AutoUpdate" />
      property.
   </li>
</ul>
<des:ValidationSummary ID="Validationsummary3" runat="server" 
   RelatedControlID="WarningLabel"
   AutoUpdate="True" HyperLinkToFields="True">
</des:ValidationSummary>

Return to the menu Select another DES Module