MaskedEdit Demonstration

Enter a Date in this format: 99/99/9999 (culture sensitive)

Enter a Number in this format: 99,999.99.

Enter Time in this format: 99:99:99 (type 'A' or 'P' to switch between AM/PM).

MaskedEdit Description

The MaskedEdit control is an ASP.NET AJAX extender that can be attached to a TextBox control. When using MaskedEdit the input is masked and the value is validated on the client according to the data type chosen. To achieve the validation, the extender is hooked up to a MaskedEditValidator that verifies the input and feeds it to a set of ASP.NET validators.

MaskedEdit Properties

The control above is initialized with this code. The italic properties are optional.

<ajaxToolkit:MaskedEditExtender
    TargetControlID="TextBox2" 
    Mask="99,999.99"
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError"
    MaskType="Number" 
    InputDirection="RightToLeft" 
    AcceptNegative="Left" 
    DisplayMoney="Left"/>

Mask Characters
9 - Only a numeric character
L - Only a letter
$ - Only a letter or a space
C - Only a custom character (case sensitive)
A - Only a letter or a custom character
N - Only a numeric or custom character
? - Any character
Mask Delimiters
/ - Date separator
: - Time separator
. - Decimal separator
, - Thousand separator
\ - Escape character
{ - Initial delimiter for repetition of masks
} - Final delimiter for repetition of masks
Examples:
9999999 - Seven numeric characters (equivalent to 9{7})
99\/99 - Four numeric characters separated in the middle by a "/"
AcceptAMPM - Whether an AM/PM symbol is displayed.
You can change between AM/PM by pressing 'A' or 'P'.
The default value is false.
AcceptNegative - Accepts the negative sign (-).
The default value is None.
None - do not show the negative sign
Left - show the negative sign on the left of the mask
Right - show the negative sign on the right of the mask
AutoComplete - Whether to automatically complete any empty mask characters not filled in by the user. AutoComplete can be used when ValidType is Date, Time, or Number.
The default value is true.
If ValidType="Number" or ValidType="Time", empty mask characters will be filled with zeros.
If ValidType="Date", empty mask characters will be filled with the current date if they are all empty; otherwise remaining characters will filled in with zeros.
AutoCompleteValue - Default value to be used when AutoComplete is enabled. It is only used when ValidType="Date" or ValidType="Time".
Overwrite Current Date or Time.
Century - Default century used when a date mask only has two digits for the year (so setting Century="2000" will interpret 01/01/07 as January 1st, 2007).
DisplayMoney - How the currency symbol is displayed. The default value is None.
None - do not show the currency symbol
Left - show the currency symbol on the left of the mask
Right - show the currency symbol on the right of the mask
InputDirection - Text input direction
LeftToRight - Left to Right (Default)
RightToLeft - Right to left.
MaskType - Type of validation to perform:
None - No validation (default)
Number - Number validation
Date - Date validation
Time - Time validation
MessageValidatorTip - Message to display when editing in textbox.
OnFocusCssClass - Name of CSS class to use when the control receives focus
OnFocusCssNegative - Name of CSS class to use when the control with a negative value gets focus
OnBlurCssNegative - Name of CSS class to use when the control with a negative value loses focus
OnInvalidCssClass - Name of CSS class to use when the control is not valid
PromptChararacter - Prompt character to indicate masked characters not yet entered. The default value is "_".

MaskedEdit Validator Description

MaskedEditValidator is a custom validator attached to the extender and the textbox. It verifies that the data is coherent on different levels (i.e., the date provided is a valid date, or the currency is in the right format). Once the MaskedEditValidator is attached to a validation group, you can perform server and client side validation on the input and display errors in your desired format. It extends from BaseValidator and performs five types of validation: Required, RegularExpression, Compare or Length, DataType, and Custom.

MaskedEditValidator Properties

The control above is initialized with this code. The italic properties are optional.

<ajaxToolkit:MaskedEditValidator
    ControlExtender="MaskedEditExtender2"
    ControlToValidate="TextBox2" 
    IsValidEmpty="False" 
    MaximumValue="12000" 
    EmptyValueMessage="Number is required"
    InvalidValueMessage="Number is invalid" 
    MaximumValueMessage="Number > 12.000"
    MinimumValueMessage="Number < -100" 
    MinimumValue="-100" ValidationGroup="Demo1"
    Display="Dynamic" 
    TooltipMessage="Input a number: -100 up to 12.000"/>

ControlToValidate - ID of the textbox to validate.
ControlExtender - ID of the MaskedEditExtender attached to the textbox.
ClientValidationFunction - Client script used for custom validation
InitialValue - Initial value of the field to be validated. The default value is empty.
AcceptAMPM - Whether or not AM/PM is accepted on times.
The default value is false.
IsValidEmpty - Whether the textbox can be empty. The default value is true. If false, the RequiredValidator is executed.
MaximumValue - The maximum value of the input. If set, CompareValidator is executed
MinimumValue - The minimum value of the input. If set, CompareValidator is executed
MessageEmpty - Text message when RequiredValidator is executed
MaximumValueMessage - Text message displayed when MaximumValue CompareValidator fails
MinimumValueMessage - Text message displayed when MinimumValue CompareValidator fails
InvalidValueMessage - Text message displayed when DataTypeValidator fails. The DatatypeValidator gets its type from the ControlExtender and is always executed.
TooltipMessage - Message displayed when the textbox has focus and an empty value.
ValidationExpression - Regular expression used to validate the input.