Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

I was playing around with ASPNET AJAX MaskEditExtender control and ASPNET Validation controls when I was working with a profile page and doing some input validations. Everything seems to be fine until I was told to always retain the phone mask format in the TextBox.

Here’s my code for Phone number masking:

<asp:TextBox ID="TXTPhoneNumber" runat="server"  MaxLength="13" ValidationGroup="GroupA"  />
                      
    <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
                       TargetControlID="TXTPhoneNumber"
                       ClearMaskOnLostFocus ="false"
                       MaskType="None"
                       Mask="(999)999-9999" 
                       MessageValidatorTip="true"
                       InputDirection="LeftToRight"
                       ErrorTooltipEnabled="True">
  </asp:MaskedEditExtender>
      
  <asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server"
                        ValidationGroup="GroupA"
                        ControlToValidate="TXTPhoneNumber"
                        ControlExtender="MaskedEditExtender1"
                        Display="Dynamic" IsValidEmpty="true"
                        ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                        InvalidValueMessage="Invalid Phone Number!" Text="*"
                        ErrorMessage="Home Phone">
</asp:MaskedEditValidator>



Running the code above will keep the mask format as it is. Now the problem is that when I pre-populate the phone TextBox, the left most digit will get cut off and I find it very frustrating. I don’t know if this a  *bug* or something.

The Workaround:

To fix the issue, what I did is to get rid of the ClearMaskOnLostFocus property in the markup  and instead set  it  via JavaScript. You may also notice in the code below that I have also use a JavaScript for setting the default mask on load of the page.

Here’s the full code below:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript">
       function checkMask() {
           var TXTPhone = document.getElementById('<%= TXTPhoneNumber.ClientID %>');
           if (TXTPhone.value.length > 0) {
               TXTPhone.value = '(' + TXTPhone.value.slice(0, 3) + ')' + TXTPhone.value.slice(3, 6) + '-' + TXTPhone.value.slice(6, 10);
           }
           else {
               TXTPhone.value = '(___)___-____';
           }
       }

       function setMask() {

           var mee = $find("MEE");
           mee.set_ClearMaskOnLostFocus(false);
       }
    </script>
</head>
<body onload="checkMask();">
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <asp:TextBox ID="TXTPhoneNumber" runat="server"  MaxLength="13" ValidationGroup="GroupA" onblur="setMask();"  />
                      
    <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TXTPhoneNumber" BehaviorID="MEE"
                       MaskType="None"
                       Mask="(999)999-9999" 
                       MessageValidatorTip="true"
                       InputDirection="LeftToRight"
                       ErrorTooltipEnabled="True">
  </asp:MaskedEditExtender>
      
  <asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server"   ValidationGroup="GroupA"
                        ControlToValidate="TXTPhoneNumber"
                        ControlExtender="MaskedEditExtender1"
                        Display="Dynamic" IsValidEmpty="true"
                        ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
                        InvalidValueMessage="Invalid Phone Number!" Text="*"
                        ErrorMessage="Home Phone">
    </asp:MaskedEditValidator>

</form>
</body>
</html>

That’s it! I hope someone find this post useful!


Posted on Thursday, July 1, 2010 11:04 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: MaskEditExtender and ClearMaskOnLostFocus

# re: MaskEditExtender and ClearMaskOnLostFocus
Requesting Gravatar...
Hi Vinz,
I have tried your code its nice, but I have following concerns i.e., when the page load then its showing the format "(___)___-____)" on the textbox instead when we are going to type then only the format has to appear. I have been looking for this requirement from past but unable to get sucess.

Is there any possiblity to implement with MaskEditExtender?


Regards,
Farooq
Left by Farooq on Jul 13, 2010 5:03 PM

# re: MaskEditExtender and ClearMaskOnLostFocus
Requesting Gravatar...
I had the same problem and solved it with something very simple. I added a zero before the data field I am populating. The zero is cut out and the phone number shows in the textbox.

this.txtContPhone.Text = "0"+ CleanPhone(ADM.WorkPhone);
Left by Isaac on Nov 10, 2010 4:54 AM

# re: MaskEditExtender and ClearMaskOnLostFocus
Requesting Gravatar...
hi i m using mask edit extender for textbox in side the script manager,
but in other text boxes there is a problem tht another text change event is automatically been fired .....
Left by piyush on Jun 30, 2011 2:08 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net