Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter
Peter's Professional Validation
The MultiSegmentDataEntry Control
Back

Use the MultiSegmentDataEntry control as a substitute for a TextBox when you have a strongly patterned string. It is a similar idea to a masked textbox, where each character position requires a specific character. For example, this control and masked textboxes are used to enter phone numbers, IP addresses, and dates (although the DateTextBox control within this suite provides much better date entry.)

While the masked textbox is one TextBox control with precise keyboard filtering, the MultiSegmentDataEntry control defines multiple TextBoxes or DropDownLists, for each "segment" of the data where the user types. Any static text, like the period found between each segment of an IP address, is displayed between the segments and the user doesn't have to type them. This design has several advantages over the masked textbox:

  • Browsers have a mixture of capabilities when it comes to handling typing at a particular position. Most masked textboxes are limited to a specific type of browser.
  • Each segment's textbox can have its own character set. For example, one can allow letters while another allows digits.
  • Segments can offer a DropDownList, which is a very good user interface for having a limited set of choices, like the months of the year.
  • Individual segments know when you type a character that separates two segments, like the period between IP address segments. They autotab to the next segment so the user can enter the text naturally, without worrying about the tab key.
  • While masked textboxes generally have a fixed number of characters allowed, segments can allow a variable number of characters. For example, in a credit card, there are between 13 and 16 digits allowed. Plus segments autotab when the textbox becomes filled.
  • When working with integers, your textbox can offer spinners (up/down arrows) to change the value.
  • Each segment can have its own Validator in addition to a master Validator for the entire text. For example, an IP address needs a RangeValidator for values from 0 to 255 on each segment.
  • Interactive Hints can be shown on the page as focus moves into a segment. So on-screen documentation is available. This feature requires a license for the Peter's Interactive Pages.

All of these features help greatly improve the user's experience so the user knows what to do and understands how to enter patterned data without knowing the pattern in advance.

To make it work, the MultiSegmentDataEntry control has the ability to get and set single patterned string, splitting or joining it according to rules that you specify. For example, on a phone number, the minus character is just formatting and the digits found before and after a minus appear in different segments.

The MultiSegmentDataEntry control supports most of the DES Validators that evaluate textboxes. For example, if you set it up for credit card numbers, you can use the CreditCardNumberValidator on it, and you can use the RequiredTextValidator to determine if the control is blank. Additionally, since each segment has rules like text length, valid characters, and "requires text", the MultiSegmentDataEntryValidator validates any pattern.

Demo 1: U.S./Canada Phone number

This MultiSegmentDataEntry control has been setup to accept U.S. and Canada Phone numbers, which have this format:
Area code - 3 digits, required, often enclosed by () or followed by space or dash
Local exchange - 3 digits, required, often followed by a space or a dash
Local phone - 4 digits, required
Extension - 1 to 5 digits, optional

This example shows autotabbing when you fill the fields or type any of characters that are allowed to follow the segment. It includes the MultiSegmentDataEntryValidator to confirm that you have entered text correctly. For example, if you only enter 2 digits into the area code, it will report an error. The RequiredTextValidator is also assigned to demand an entry. Validators have been setup to change the color of the segments if there is an error.

The Submit button lets you validate and if it posts back, to show a single string retrieved from the MultiSegmentDataEntry control, by getting its Text property.

The formatting is using style sheets to establish a border around the textboxes and to make the textbox borders lighter.

()- ext:

 

ASP.NET Syntax for this demo

<des:MultiSegmentDataEntry ID="MultiSegmentDataEntry1" runat="server" CssClass="DESVALMultiSegContainer">
   <Segments>
      <des:TextSegment CssClass="DESVALMultiSegTextBox" TabOnTheseKeys=") -" MaxLength="3"
         MinLength="3" Width="30px" AutoWidth="False" DisplayTextBefore="(" DisplayTextAfter=")"
         FormattingTextAfter=") " FormattingTextBefore="(" IgnoreTheseCharsAfter=" " IgnoreTheseCharsBefore=" " />
      <des:TextSegment CssClass="DESVALMultiSegTextBox" TabOnTheseKeys="- " MaxLength="3"
         MinLength="3" Width="30px" AutoWidth="False" FormattingTextAfter="-" IgnoreTheseCharsAfter=" " />
      <des:TextSegment CssClass="DESVALMultiSegTextBox" TabOnTheseKeys="ext:" MaxLength="4"
         MinLength="4" Width="40px" AutoWidth="False" IgnoreTheseCharsAfter=" " />
      <des:TextSegment CssClass="DESVALMultiSegTextBox" MaxLength="5" FormattingTextBefore=" x"
         NoTextBeforeWhenBlank="True" Required="False" DisplayTextBefore="&nbsp;ext:" />
   </Segments>
</des:MultiSegmentDataEntry>
<des:RequiredTextValidator ID="RequiredTextValidator1" runat="server" ControlIDToEvaluate="MultiSegmentDataEntry1"
   ErrorMessage="Please fill this in">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:RequiredTextValidator>
<des:MultiSegmentDataEntryValidator ID="MultiSegmentDataEntryValidator1" runat="server"
   ControlIDToEvaluate="MultiSegmentDataEntry1" ErrorMessage="This is not a valid Phone Number. Please correct it">
   <ErrorFormatterContainer>
      <des:TextErrorFormatter Display="Dynamic" />
   </ErrorFormatterContainer>
</des:MultiSegmentDataEntryValidator>

Demo 2: IP Address

This MultiSegmentDataEntry control accepts IP Addresses. They have the following format:
1-3 digits with a range of 0 to 255, followed by a period
1-3 digits with a range of 0 to 255, followed by a period
1-3 digits with a range of 0 to 255, followed by a period
1-3 digits with a range of 0 to 255

There are four segments, all using an IntegerTextBox with spinners. Each segment has a RangeValidator which reports an error if the digits are outside the range. The MultiSegmentDataEntryValidator catches any segments left blank.

As you type, you can enter digits and periods. The periods will autotab.

+
-
.
+
-
.
+
-
.
+
-

   

ASP.NET Syntax for this demo

<des:MultiSegmentDataEntry ID="MultiSegmentDataEntry2" runat="server">
   <Segments>
      <des:IntegerTextSegment FormattingTextAfter="." TabOnTheseKeys="." ShowSpinner="True"
         SpinnerMinValue="0" SpinnerMaxValue="255" MaxLength="3" />
      <des:IntegerTextSegment FormattingTextAfter="." TabOnTheseKeys="." ShowSpinner="True"
         SpinnerMinValue="0" SpinnerMaxValue="255" MaxLength="3" />
      <des:IntegerTextSegment FormattingTextAfter="." TabOnTheseKeys="." ShowSpinner="True"
         SpinnerMinValue="0" SpinnerMaxValue="255" MaxLength="3" />
      <des:IntegerTextSegment ShowSpinner="True" SpinnerMinValue="0" SpinnerMaxValue="255"
         MaxLength="3" />
   </Segments>
</des:MultiSegmentDataEntry>
<des:MultiSegmentDataEntryValidator ID="MultiSegmentDataEntryValidator2" runat="server"
   ControlIDToEvaluate="MultiSegmentDataEntry2" ErrorMessage="This is not a valid IP Address. Please correct it">
</des:MultiSegmentDataEntryValidator>
<des:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="Between 0 and 255"
   ControlIDToEvaluate="MultiSegmentDataEntry2_1" DataType="Integer" Minimum="0"
   Maximum="255">
</des:RangeValidator>
<des:RangeValidator ID="RangeValidator2" runat="server" ErrorMessage="Between 0 and 255"
   ControlIDToEvaluate="MultiSegmentDataEntry2_2" DataType="Integer" Minimum="0"
   Maximum="255">
</des:RangeValidator>
<des:RangeValidator ID="RangeValidator3" runat="server" ErrorMessage="Between 0 and 255"
   ControlIDToEvaluate="MultiSegmentDataEntry2_3" DataType="Integer" Minimum="0"
   Maximum="255">
</des:RangeValidator>
<des:RangeValidator ID="RangeValidator4" runat="server" ErrorMessage="Between 0 and 255"
   ControlIDToEvaluate="MultiSegmentDataEntry2_4" DataType="Integer" Minimum="0"
   Maximum="255">
</des:RangeValidator>

Back