Article

Ajax MaskedEditExtender with MaskedEditValidator example in asp.net

04 Jun 2015 Kamal Pratap
0 Comments 1987 Views



In this example we will explain how to use ajax MaskedEditExtender & MaskedEditValidator in asp.net. It provides rich mask functionality on texbox to accept the validate format like date & Time.

Ajax MaskedEditExtender with MaskedEditValidator example in asp.net

Add Ajax control Tool Kit  tag prefix on the page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Add Ajax control Tool Kit  script manager in the body section on the web page

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>

Asp.Net :

<table>
            <tr>
                <td>
                    Date Time [dd/MM/yyyy hh:mm:ss]
                </td>
                <td>
                    <asp:TextBox ID="txtDateTime" runat="server"></asp:TextBox>
                    <cc1:MaskedEditExtender TargetControlID="txtDateTime" ID="mdeDateTime" runat="server"
                        Mask="99/99/9999 99:99:99" CultureName="en-AU" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
                        OnInvalidCssClass="MaskedEditError" MaskType="DateTime" />
                    <cc1:MaskedEditValidator ID="mevDateTime" runat="server" ControlToValidate="txtDateTime"
                        ForeColor="Red" ControlExtender="mdeDateTime" IsValidEmpty="false" MaximumValue="01/01/2099 23:59:59"
                        MinimumValue="01/01/2000 00:00:00" EmptyValueMessage="Enter Date Time Value"
                        MaximumValueMessage="Date must be less than 01/01/2099" InvalidValueBlurredMessage="Date Time is invalid"
                        MinimumValueMessage="Date must be grater than 01/01/2000" EmptyValueBlurredText="*"
                        ToolTip="Enter date between 01/01/2000 to 01/01/2099" ValidationGroup="MKE">
                    </cc1:MaskedEditValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Date [dd/MM/yyyy]
                </td>
                <td>
                    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
                    <cc1:MaskedEditExtender TargetControlID="txtDate" ID="mdeDate" runat="server" Mask="99/99/9999"
                        CultureName="en-AU" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
                        OnInvalidCssClass="MaskedEditError" MaskType="Date" />
                    <cc1:MaskedEditValidator ID="mevDate" runat="server" ControlExtender="mdeDate" ControlToValidate="txtDate"
                        ForeColor="Red" 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"
                        ValidationGroup="MKE">
                    </cc1:MaskedEditValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Time [hh:mm:ss]
                </td>
                <td>
                    <asp:TextBox ID="txtTime" runat="server"></asp:TextBox>
                    <cc1:MaskedEditExtender TargetControlID="txtTime" ID="mdeTime" runat="server" Mask="99:99:99"
                        MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError"
                        MaskType="Time" />
                    <cc1:MaskedEditValidator ID="mevTime" runat="server" ControlExtender="mdeTime" ControlToValidate="txtTime"
                        ForeColor="Red" 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" ValidationGroup="MKE">
                    </cc1:MaskedEditValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Amount [9,99,999.99]
                </td>
                <td>
                    <asp:TextBox ID="txtAmount" runat="server"></asp:TextBox>
                    <cc1:MaskedEditExtender TargetControlID="txtAmount" ID="mdeAmount" runat="server"
                        Mask="9,99,999.99" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
                        OnInvalidCssClass="MaskedEditError" MaskType="Number" />
                    <cc1:MaskedEditValidator ID="mevAmount" runat="server" ControlExtender="mdeAmount"
                        ForeColor="Red" ControlToValidate="txtAmount" IsValidEmpty="False" EmptyValueMessage="Number is required"
                        InvalidValueMessage="Number is invalid" MaximumValueMessage="Number > 900000"
                        MinimumValueMessage="Number < 0" MinimumValue="0" MaximumValue="900000" Display="Dynamic"
                        TooltipMessage="Input a number from 0 to 900000" EmptyValueBlurredText="*" InvalidValueBlurredMessage="*"
                        ValidationGroup="MKE">
                    </cc1:MaskedEditValidator>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Submit" ValidationGroup="MKE" />
                </td>
            </tr>
        </table>

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment