The Ajax Toolkit MaskedEditExtender Control in ASP.Net
The MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered.
The supported data formats are - Number, Date, Time, and DateTime.
MaskedEdit uses the culture settings specified in the CultureName property.
MaskedEdit Properties:
MaskType - Type of validation to perform:
- None - No validation
- Number - Number validation
- Date - Date validation
- Time - Time validation
- DateTime - Date and time validation
AcceptAMPM - True to display an AM/PM symbol
AcceptNegative - True if the negative sign (-) is allowed
AutoComplete - True to automatically fill in empty mask characters not specified by the user
- MaskType=Number - Empty mask characters will be filled with zeros
- MaskType=Time - Empty mask characters will be filled with the current time
- MaskType=Date - Empty mask characters will be filled with the current date
- MaskType=DateTime - Empty mask characters will be filled with the current date/time
ErrorTooltipEnabled - True to show a tooltip message when the mouse hovers over an invalid TextBox
Filtered - Valid characters for mask type "C" (case-sensitive)
InputDirection - Text input direction
- LeftToRight - Left to Right
- RightToLeft - Right to left
MessageValidatorTip - Message displayed when editing in TextBox
MaskedEdit Validator:
The MaskedEditValidator is a custom validator which attaches to the MaskedEdit extender and its associated TextBox and verifies that the input text matches the pattern specified in the MaskedEdit extender.
MaskedEditValidator Properties:
ControlToValidate - The ID of the TextBox to validate
ControlExtender - The ID of the MaskedEditExtender attached to the TextBox
AcceptAMPM - Whether or not AM/PM is accepted on time.
ClientValidationFunction - The Client-side script used for custom validation
IsValidEmpty - True if the TextBox can be empty
ValidationExpression - The Regular expression used to validate the input
TooltipMessage - The message displayed when the TextBox has focused with an empty value
EmptyValueMessage - The message displayed when empty and TextBox has to focus
EmptyValueBlurredText - The message displayed when empty and TextBox does not have the focus.
InvalidValueMessage - The message displayed when invalid and TextBox has to focus
InvalidValueBlurredMessage - A message displayed when invalid and TextBox does not have the focus.
MaximumValueMessage - A message displayed when maximum value exceeded and TextBox has the focus.
MaximumValueBlurredMessage - Message displayed when the maximum value exceeded and TextBox does not have the focus.
MinimumValueMessage - The message displayed when minimum value exceeded and TextBox has the focus.
MinimumValueBlurredText - The message displayed when minimum value exceeded and TextBox does not have the focus.
Code:
<%-- ScriptManager control manages client script for AJAX enabled ASP.NET pages.This enables partial-page rendering and Web-service calls.You have to used this if you want to use ajax control--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<%--Use MaskedEditExtender and MaskedEditValidator--%>
<cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox1" MaskType="Date" Mask="99/99/9999">
</cc1:MaskedEditExtender>
<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1" TooltipMessage="Input a Date"
ControlToValidate="TextBox1" EmptyValueMessage="Date is required" InvalidValueMessage="Date is invalid" IsValidEmpty="False" >
</cc1:MaskedEditValidator>
<asp:Label ID="Label1" runat="server" Text="Enter D.O.B"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="Button1"runat="server" Text="Submit"onclick="Button1_Click"/>
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
Here Mask="99/99/9999" specify the input format
Run the project
When you click the Textbox then a message will show input a date
When you fill the only the first field and click the Submit button then the remaining field will be taken from the current date.
When you enter an invalid date then an error message will show.
When you enter a valid date and click Submit button then the date will be shown in the Label
Sunil Singh
10-Jul-2017Thanks for sharing informative post.