How to create AJAX MaskedEditExtender and MaskedEditValidator in ASP.NET?

In this article ,I have explained in detail about AJAX maskedEditExtender in ASP.NET. For example if we use textbox control in our website need to tell user how to enter date format or number format etc. And also I explained in detail about MaskedEditValidator in this same resource.


MaskedEditExtender Properties:

Mask Type: This is the main property in mask edit extender based on the mask type validation is performed.
Mask Type have four main validations except none
None: No validations
Number: It is validate user entered only number in the textbox
Date: It is validate user entered correct date in the textbox.
Time: Time is validate user enter correct format of time in the textbox.
DateTime: DateTime is used to validate user entered valid date and time
Mask: This property is used to denote what is the characters user to be entered in the textbox and specify separator.

MaskedEditValidator Properties:

ControlToValidate: Entered here which textbox you want to validate
ControlExtender:: Entered here which maskededitextender is control in that textbox.
IsValidEmpty: If your textbox is mandatory then set this property as true.
MaximumValue: This property is used to set maxmimum value of that masked textbox.
Minimum Value: This property is used to set Minimum value of that textbox
ValidationExpression: It is used to validate textbox using regular expression
TooltipMessage: This property is used to show tooltip of the texbox.
EmptyValueMessage: This property is used to show error when textbox is empty
InvalidValueMessage: This property is show error when user enter wrong date etc. in that textbox
InvalidValueBlurredMessage: This property is show error message after user leave from textbox only entered value is invalid.
MaximumValueBlurredMessage: This property is show error message when user entered out of maxmimum value in the textbox.
MinimumValueBlurredText: This property is show error message if user entered minimum values compared to specified minimum value.

Symbol and Description

9 Allow only numeric in that position of the textbox
L Allow only letter in that position of the textbox
$ Allow only a letter or a space
C Allow only a custom character. It is case sensitive.
A Allow only a letter or a custom character
N Allow only a numeric or custom character
? Allow any character user to be entered in the textbox
/ This one is used to denote date separator
: This one is used to denote time separator
. This one is used to denote decimal separator
, This one is used to denote thousand separator
\ This one is escape character to separate values ex .999\/999 if we use like this / is appear in between six numbers

Client side:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>AJAX Masked Edit Extender and Masked Edit Validator</title>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<table cellpadding="0" cellspacing="0" align="center" width="1000">
<td height="40" colspan="2">
<h3>AJAX Masked Edit Extender and Masked Edit Validator Examples</h3>
<td height="40" width="50%">
Enter Number to test
<asp:TextBox ID="TextBox1" runat="server" Width="180"></asp:TextBox>
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox1"
Mask="9,99,999.99" MessageValidatorTip="true" MaskType="Number" InputDirection="RightToLeft"
AcceptNegative="Left" ErrorTooltipEnabled="True" />
<asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1"
ControlToValidate="TextBox1" IsValidEmpty="false" MaximumValue="100000" MinimumValue="-100"
EmptyValueMessage="Enter Some Numbers" MaximumValueMessage="Number must be less than 1,00,000"
MinimumValueMessage="Number must be greater than -100" EmptyValueBlurredText="*"
ToolTip="Enter values from -100 to 1,00,000"></asp:MaskedEditValidator>
<td height="40">
Enter Time to test (HH:mm:ss)
<asp:TextBox ID="TextBox2" runat="server" Width="180"></asp:TextBox>
<asp:MaskedEditExtender ID="MaskedEditExtender2" runat="server" TargetControlID="TextBox2"
Mask="99:99:99" MessageValidatorTip="true" MaskType="Time" InputDirection="RightToLeft"
ErrorTooltipEnabled="True" />
<asp:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ControlExtender="MaskedEditExtender2"
ControlToValidate="TextBox2" IsValidEmpty="false" MaximumValue="23:59:59" MinimumValue="00:00:00"
EmptyValueMessage="Enter Time" MaximumValueMessage="23:59:59" InvalidValueBlurredMessage="Time is Invalid"
MinimumValueMessage="Time must be grater than 00:00:00" EmptyValueBlurredText="*"
ToolTip="Enter time between 00:00:00 to 23:59:59"></asp:MaskedEditValidator>
<td height="40">
Enter date to test (dd/MM/yyyy)
<asp:TextBox ID="TextBox3" runat="server" Width="180"></asp:TextBox>
<asp:MaskedEditExtender ID="MaskedEditExtender3" runat="server" TargetControlID="TextBox3"
Mask="99/99/9999" MessageValidatorTip="true" MaskType="Date" InputDirection="RightToLeft"
ErrorTooltipEnabled="True" />
<asp:MaskedEditValidator ID="MaskedEditValidator3" runat="server" ControlExtender="MaskedEditExtender3"
ControlToValidate="TextBox3" IsValidEmpty="false" MaximumValue="01/01/2099" MinimumValue="01/01/2000"
EmptyValueMessage="Enter Date Value" MaximumValueMessage="Date must be less than 01/01/2099"
InvalidValueBlurredMessage="Date is invalid" MinimumValueMessage="Date must be grater than 01/01/2000"
EmptyValueBlurredText="*" ToolTip="Enter date between 01/01/2000 to 01/01/2099"></asp:MaskedEditValidator>
<td height="40" colspan="2" align="center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />


Source Code Detail:
Here with I have attached source code of AJAX MaskedEditExtender with MaskedEditValidator control download and try to learn about this two concepts.
Front End : ASP.NET
Code Behind : C#

I hope this article help to know about AJAX MaskedEditExtender and MaskedEditValidator.


  • Source Code (43583-191757-AJMaskedEditExtender.rar)
  • Comments

    Guest Author: Ashish14 May 2013

    Yup It Is helpful