FlexMaskEditBox - a masked edit control

• Download source - 40.4 KB

Introduction

Why will you have to use a MaskEditBox? It's not a professional look when the end user can give alphanumeric input when numeric input is required.

It's a piece of cake to validate the input and/or give feedback of wrong input to the type goats.

Using the code

There are 3 types of input viz. alphabetic, numeric and date. The behavior of the three types are different when typing.

When using the numeric type together with decimals (example mask:= "9999D##") and the end user types the decimal notation a (.) or (,) depending on international setting, the cursor automatically goes to the decimal point. Also the input characters are drawn from right to left. This is an example of validation using the FlexMaskEditBox and give feedback to the end user by ErrorTxt.

Private Sub FlexMaskEditBox1_Validating(ByVal sender As Object, 
    ByVal e As System.ComponentModel.CancelEventArgs) 
    Handles FlexMaskEditBox1.Validating, FlexMaskEditBox2.Validating, 
    FlexMaskEditBox3.Validating, FlexMaskEditBox5.Validating
    
    Dim fmb As FlxMaskBox.FlexMaskEditBox = CType(sender, 
        FlxMaskBox.FlexMaskEditBox)
    
    If fmb Is FlexMaskEditBox1 Then
        Try
            Dim Value As Decimal = Decimal.Parse(fmb.Text)
            If Value < 201.13 OrElse Value > 4027.55 Then
                fmb.ErrorTxt = "Value MUST between 201.13 
                                    and 4027.55"
                If CheckBox1.Checked Then e.Cancel = True
            Else
                fmb.ErrorTxt = ""
            End If
        Catch 'normal, this will never been evaluate
            fmb.ErrorTxt = "There is no Valid Value given"
            If CheckBox1.Checked Then e.Cancel = True
        End Try
    ElseIf fmb Is FlexMaskEditBox2 Then
        Try
            Dim dt As DateTime = DateTime.Parse(fmb.Text)
            If dt.Year < 1980 OrElse dt.Year > 2010 Then
                fmb.ErrorTxt = "The Range of valid Years 
                                    must be between 1980 an 2010"
                If CheckBox1.Checked Then e.Cancel = True
            Else
                fmb.ErrorTxt = ""
            End If
        Catch
            fmb.ErrorTxt = "Not A Valid Date, Try Again!"
            If CheckBox1.Checked Then e.Cancel = True
        End Try
    ElseIf fmb Is FlexMaskEditBox3 Then
        With fmb
            If .Text.Replace(" ", "").Length < 6 Then
                .ErrorTxt = "Not All Characters Are Given"
                If CheckBox1.Checked Then e.Cancel = True
            Else
                .ErrorTxt = ""
            End If
        End With
    ElseIf fmb Is FlexMaskEditBox5 Then
        With fmb
            If Not Regex.IsMatch(.Text, "^([\w-]+\.)*?
                    [\w-]+@[\w-]+\.([\w-]+\.)*?[\w]+$") Then
                    
                .ErrorTxt = "No valid Email address"
                If CheckBox1.Checked Then e.Cancel = True
            Else
                .ErrorTxt = ""
            End If
        End With
    End If
End Sub

Using the Mask

(#) - (chr 48 - 57)

(9) - (chr 48 - 57) (-) minus sign

(?) - (chr 65 - 90) (chr 97 - 121)

(A)(C)  - (chr 65 - 90) (chr 97 - 121) (chr 48 - 57)

(a)(c)  - (chr 65 - 90) (chr 97 - 121) (chr 48 - 57) (chr 32 )

(&) - (chr 32 - 126) (chr 128 - 255)

(\)  Next char will be no mask char

(>) All chars next to the > sign will transformed in upper-case
    until the next mask char is an (<) or (\) or (|)

(}) Next 1 Char will transformed in upper-case
    
(<) All chars next to the < sign will transformed in lower-case
    until the next mask char is an (>) or (\) or (|)
    
(|) Stops next chars from Upper or Lower casing

({) Next 1 Char will transformed in lower-case

(d)(D) Decimal Point (#####d99) = 12345.67 or 12345,67  
       (depending on country settings)

(g)(G) Group Separator (##g###g###d##) = 12.345.678,90 or 12,345,678.90
       (depending on country settings)
  
(s)(S) Date Separator (##s##s####) = 12-12-2000 or 12/12/2000
       (depending on country settings)

So when you want to include characters in your mask, which are also mask signs, use the \ in front. For instance, ##s##s1\9## (the 9 is also a mask sign, but the 1 is not)

Including the FlexMaskEditBox into your project

Instructions for using the FlexMaskEditControl control in a new project:

1. Start Microsoft Visual Studio .NET.
2. Open the FlexMaskEdit.vbproj project.
3. On the Build menu, click Build Solution to build FlexMaskEdit.dll.
4. Close the project.
5. Create a new Windows application using Visual Basic .NET. Form1 is created by default.
6. On the Tools menu, click Customize Toolbox.
7. Select the .NET Framework Components tab.
8. Click the Browse button.
9. Navigate to the folder where FlexMaskEdit.dll was built (it should be the bin folder located underneath the location where you unzipped the project).
10. Select FlexMaskEdit.dll and click Open. It will automatically add it to the selected components list and check the item for you.
11. Click OK to close the Customize Toolbox dialog box. Note that the FlexMaskEdit control now appears on your Toolbox. That's all, now you can draw the FlexMaskEditBox like you do a TextBox.

History

• Original the source code was written in VB6 (a few years ago) but re-written for better performance.

Acknowledgement

• Many thanks to Hans Scholten (Email: wonen@wonen.com) for his input.