MaskedEditExtender and Phone Numbers

Article
2008-01-08

Question

_{Tuesday, January 8, 2008 5:43 PM}

Hi all,

I am trying to use a MaskedEditExtender and Validator for a phone number. The code below isn't working quite as I want. I've come to the conclusion that I may have to dig into the source and change things. But....I'll check here first, as some of you may have some ideas. This is a required field.

Here's the code:

<asp:TextBox runat="server" CssClass="rightdec" ID="mainPhone"></asp:TextBox>

<cc1:MaskedEditExtender ID="maskMainPhone" runat="server"

TargetControlID="mainPhone"

Mask="(999)999-9999"

MaskType="None"

MessageValidatorTip="true"

OnFocusCssClass="editmask"

OnInvalidCssClass="invalidmask"

InputDirection="LeftToRight"

ClearMaskOnLostFocus="false"

AutoComplete="false" />

<cc1:MaskedEditValidator ID="MaskedEditValidator1" runat="server"

ControlToValidate="mainPhone"

ControlExtender="maskMainPhone"

Display="Dynamic"

IsValidEmpty="false"

EmptyValueMessage="Required"

InvalidValueMessage="Invalid Number" />

If MaskType is set to Number, I have to set ClearMaskOnLostFocus or the parts of the mask register as a string entry and Numeric validation fails.

If MaskType is set to None, validation does not take place at all on whether or not any number is entered.

I'd love to have ClearMaskOnLostFocus=false, and have the validator catch if the field is empty and if the entered data matches the Mask.

Thanks

All replies (6)

_{Monday, January 14, 2008 3:17 AM ✅Answered}

Hi Hankmap,

I think you should set MaskType to "None" since it is a string instead. Also we can use ValidationExpression to validate its inputted value. Here is the working sample.

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox runat="server" ID="mainPhone"></asp:TextBox>
    <ajaxToolkit:MaskedEditExtender ID="maskMainPhone" runat="server" TargetControlID="mainPhone"
        Mask="(999) 999-9999" MaskType="None" MessageValidatorTip="true" OnFocusCssClass="editmask"
        OnInvalidCssClass="invalidmask" InputDirection="LeftToRight" ClearMaskOnLostFocus="false"
        AutoComplete="false" />
    **<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlToValidate="mainPhone"
        ControlExtender="maskMainPhone" Display="Dynamic" IsValidEmpty="false" ValidationExpression="((\\d{3}\ ?)|(\d{3}-))?\d{3}-\d{4}" EmptyValueMessage="Required"
        InvalidValueMessage="Invalid Number" />
**    <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>
</body>
</html>

Best regards,

Jonathan

_{Wednesday, January 9, 2008 8:41 AM}

Hi hankmap,

I'm not sure but maybe this will help you:

It's about the weird behavior the MaskedEdit sometimes have:

Hi jjepen,

I made a mask with that phone number you are talking about and I noticed the weird behavior.

The thing is, only a few characters will remain when the focus is lost. For example: a / or : will remain, but a ( or ) not!!

What you want is actually extra functionality for the MaskedEdit of the ajaxcontrolToolkit.
You should go to the codeplex website. There is the toolkit project located, and there you can post bugs/issues/wishes etc !! And then people can vote on it!

You could suggest a more flexible mask setup for the MaskedEdit!!

In the mean time, you can use this workaround:

What is does in words:

I have set the clearmaskOnLostFocus to true!
On the textbox, I have set an event that triggers some javascript when the text of the textbox changes
in the js, I check if the value has a length of 10 (which would be the length of your phone-number but without the mask!!)
if the length is 10, then I reformat the text
if it isn't 10, then I clear the value
NOTE that the code is not complete but just an example. You should use this in combination with a validator that warns for empty values (or whatever you wish )

Here is the example (it is just a simple page with no code-behind file):

<%@ Page Language="VB" AutoEventWireup="false" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  Namespace="System.Web.UI" TagPrefix="asp" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function checkmask()
    {
      var mytxt = document.getElementById('TextBox5');
   if (mytxt.value.length === 10)
     {
        mytxt.value = '(' + mytxt.value.slice(0,3) + ') ' + mytxt.value.slice(3,6) + '-' + mytxt.value.slice(6,10);
      }
      else
   {
        mytxt.value = '';
    }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
    <asp:TextBox ID="TextBox5" runat="server" Width="130px" MaxLength="1" style="text-align:justify"  onchange="checkmask();" />
      <cc1:MaskedEditExtender ID="MaskedEditExtender5" runat="server"
          TargetControlID="TextBox5"
          Mask="(999) 999-9999"
          MaskType="None"
          ClearMaskOnLostFocus="true" />
    </div>
    </form>
</body>
</html>

Kind regards,
Wim

This is the original thread: http://forums.asp.net/t/1178015.aspx

Let me know if it helps

Kind regards,
Wim

_{Wednesday, January 9, 2008 11:32 AM}

Hi deblendewim,

Thanks for your response. That is actually what I didn't want to have to do, but it looks like I'll have to go in that direction. I was hoping that I was missing something.

I'm suprised that phone numbers were not considered for MaskedEdit.

I will go to codeplex and post my wishes.

Thanks again for your response.

_{Monday, January 14, 2008 12:38 PM}

Ah yes! It all seems so clear now!

Thanks Jonathan, works like a charm.

_{Tuesday, January 15, 2008 10:38 AM}

Hi Jonathan,

When I use code similar to what you have above (my ValidationExpression is "^(\\d{3}\ ?)(\d{3}?)-(\d{4}?)$") and bind the text box control to data from a data store, the first digit is cut off and I am left with an invalid string. If I set ClearMaskOnLostFocus to "true", my phone numbers validate incorrectly because of my regex. Am I doing something incorrectly?

_{Tuesday, January 29, 2008 3:55 PM}

I am having the exact same problem; did anyone figure this out? If I bind an existing phone number to the field using the following mask: "(999) 999-9999" the left-most digit is cut off. If I change the mask to "999 999-9999" it works just fine. I would like to keep the parenthesis if possible.

Anyone know how to do this?

I know we are bolting on to a solved post, but the 1st posts are relevent to this question.

Thanks,

Share via

MaskedEditExtender and Phone Numbers

Question

All replies (6)

Additional resources