AJAX :: Phone Number Mask Format With MaskedEditExtender
Feb 21, 2011
I want a TextBox with a mask like (xxx) xxx-xxxx using a MaskedEditExtender. I tried to set up the mask property to "(999) 999-9999" or "(999) 999-9999" but nothing works. It there a way I can have the mask I want?
Breaking out the required field validation helped me get the date textbox to behave the way I need. Just positioning validation messages and such. Behavior I like here is that TextBox has no mask to start (focus off of textbox). When you put the cursor in the textbox or the textbox gets focus then the mask shows up: __/__/____. As you type the underscore placeholders dissapear but the '/' chars stay in place.
And finally, this is key, when you have a correct date and take the focus away from the text box the dashes stay in place. I just realized that is because the date mask seems to fill in the blank spaces with the current date. I cannot get this behavior with a phone. Granted there is no phone mask type. Here is the phone code:
I have tried MaskType set to number but it doesn't change the behavior. Right now the dashes dissapear when I take the focus off of the phone textbox. One thing I noticed with date is that if it is incomplete when it loses focus it fills in the rest with the current date values. Since there is no Phone mask type that behavior is not built in. Does anyone know how to set a default behavior so if you type in 55 in would automatically finish? 555-55-5555 And when you take the focus off it would keep the dashes. But if the textbox is empty I want with no focus the mask should dissapear completely.
I have confronted a problem of using MaskedEditExtender when try to restrict user to input a number mask with mask. User input of course has no problem. The problem is when the system get the value from database or somewhere (doing assignation), the textbox show the wrong value with the following mask setting: I am writing to contribute and share my solution: example:
textbox1: 1.1 (user input) by using the following mask: <asp:MaskedEditExtender ID="meeXML" runat="server" TargetControlID="textbox1" Mask="999.99" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" MaskType="Number" InputDirection="RightToLeft" AcceptNegative="Left" ClearMaskOnLostFocus="True" ErrorTooltipEnabled="True"/> When the system get back the data, textbox1 will show: textbox1: 0.11 <- that is not the actual what I want: ========================================== the solution: ========================================== <asp:MaskedEditExtender ID="meeXML" runat="server" TargetControlID="textbox1" Mask="NNNNNNNNNNNN" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" MaskType="Number" InputDirection="RightToLeft" AcceptNegative="Left" ClearMaskOnLostFocus="True" Filtered="." ErrorTooltipEnabled="True"/>
My requirement is, I have one text box and that text box accepts US Format 10 digit phone number like 555-555-5555. I want when user enter 5555555555 it automatically convert this in 555-555-5555 and if he enter some wrong number then show him error and if dont want to enter any thing then there should not be any error.
<th style="width: 150px">Home Telephone </th> <td> <asp:TextBox ID="txtHome" runat="server" MaxLength="12" ValidationGroup="vUserDetailsB" Width="252px" CssClass="txtBox" TabIndex="19"></asp:TextBox> <cc1:MaskedEditExtender ID="meeHome" runat="server" TargetControlID="txtHome" AutoComplete="false" MaskType="None" Mask="999-999-9999" ClearMaskOnLostFocus="true" InputDirection="LeftToRight" /> <%-- <cc1:MaskedEditValidator ID="mevHome" runat="server" ControlToValidate="txtHome" EmptyValueMessage="Telephone Number is required." ValidationGroup="vUserDetailsB" ControlExtender="meeHome" InvalidValueMessage="Valid Telephone Number is required." IsValidEmpty="false" ValidationExpression="^d{3}-d{3}-d{4}$" Font-Size="8pt" />--%> <asp:RegularExpressionValidator ID="revHome" runat="server" ControlToValidate="txtHome" Display="Dynamic" ErrorMessage="Invalid Home number. Number should be in the format: 555-123-4567" Font-Size="8pt" SetFocusOnError="True" ValidationExpression="d{3}-d{3}-d{4}" ValidationGroup="vUserDetailsB" Width="100%" meta:resourcekey="txtHomeResource1"></asp:RegularExpressionValidator> </td>
Whats happenening, If i entered any thing like 5555555555 and it is coverting to this 555-555-5555 format which is correct and then when i moved to another textbox it is throwing error "Invalid Home number. Number should be in the format: 555-123-4567" and this format changes to 5555555555 and its not going ahead.
I am using the AJAX Toolkit MaskedEditExtender to format some of my web form's textboxes. When I load the page and start to enter data into the textboxes, the masking doesn't show. I've included my page code below:
using java script with update panel. I have checkbox, textbox with MaskedEditExtender inside update panel in web content form. I want to change the mask for MaskedEditExtender when I check the checkbox without doing pastback for the update panel using java script
I ran into a strange issue with the AJAX MaskedEditExtender control, the extender is used with the Mask="99/99/9999" and MaskType="Date". Initially when the page loads the textbox was set to readonly using textbox.Attributes.Add("readonly", "readonly") in the codebehind. After the page loads if the user clicks on a certain button it would change the textbox to editable using javascript code: textbox.readOnly = false. The strange thing is after that if you start typing in the textbox you can see the entire mask (__/__/____) shifting to the right as you type. For example it looks something like this: 09__/__/____ instead of the normal 09/__/____.
If the textbox was never set to readonly in the first place this behavior won't happen. So it seems something got messed up when changing from readonly to not. I was able to reproduce this in a barebone aspx page with just the textbox, the mask extender, and a button that when clicked turning off the textbox's readonly. Anyone knows how I can fix this?
I have text box to enter a phone number. I'm using AJAX MaskedEditExtender and MaskedEditValidator to validate the phone.I have no problem with mask but the problem nothing happen when I enter for example only 3 number then lose the focus but as soon the focus on I will see the error message and it will disappear as soon as I write one number.
all what I want to get the error message if the user did not enter 9 numbers after lose the focus.
here is my code: <asp:TextBox ID="txtHomePhone" runat="server" ontextchanged="txtHomePhone_TextChanged"></asp:TextBox>
I have been attempting to find a solution for my phone number formatting problem for 2 hours now and I am not getting any closer. My 10 digit phone number is stored as a varchar(14) without any formatting (just 10 digits).
Here is the code to format the phone number in a gridview:
[Code]....
why the formatting won't work? It just displays the 10 numbers with no formatting.
I have read through a lot of post but cannot find the answer I'm looking for. I'm using expression web 4 and asp.net 4.0 gridview to show database search results. The search works fine but the phone number mask from the database is not coming over in the results. I have tried some examples with the database, if I remove the mask on the column in the table and manually type in the phone number (###) ###-####, it works in the results.
If I keep the mask in the database, the results are just ########## in a row. I have also tried to use the datastring under edit colums with
{0:(###) ###-####} in the box with no luck. I have the HTML encode to False and the HTML format string set to true. I still get just the straight line of numbers for the results.
The database is a Access 2007 template and I'm actually using Access 2010.
I have a tex box which I'm using to capture a bank sort code.
I want to use the AJAX MaskedEditExtender so the user only ever inputs the data in this format 12-34-56.
Here is my extender code:
[Code]....
This initially works fine, however when i remove the focus on this text box the input removes any hyphen and the texbox value is left like this 123456.
In my code when the page loads I need to set the tbDate to readonly, then when the user enters some other info on the page I will make tbDate editable (not readonly), I did all these using javascript by setting tbDate.readOnly = true/false. However, when going from readonly to editable, when the tbDate field receives the focus, the mask __/__/____ appears, but when the user starts typing the first digit, it pushes the mask as if the mask was part of the value, so it becomes something like 12__/__/____ instead of 12/__/____. If I commented out the code that makes the tbDate field readonly, then the mask works as expected.
I have found a problem with the Masked Edit Extender when using it with a culture of Azeri (Latin, az-Latn-AZ). I have not found anywhere that states that the control should not be used with languages that is not included in the list of languages that the ajax control toolkit is translated.
The currency symbol for Azeri is "man." the first problem is that the mask displays this as "man," but the comma is the decimal indicator for Azeri.
Scenario 1
When the DisplayMoney property is set to "right" and the currency is removed by the masked editors script the resulting value looks something like "12,12," the second comma then invalidates the numeric value and all my compare validator which also acts on the same textbox keeps failing because the value is not numeric.
Scenario 2:
When the DisplayMoney property is set to "left" there is always a "0," added to the string because the the script of the masked editor removes the man then gets to the comma (man",") sees it as a decimal indicator and adds the 0 before the comma this happens on the first blur of the textbox each resulting onblur event will add another 0 to the value. But the value is already invalidated by the fact that it again has two commas like 0,12,12.
I get this result even with the Ajaxcontroltoolkit sample site, the changes needed to sample site's MaskedEdit.aspx page can be seen below.
For scenario 1, change the first MaskedEditExtender on the MaskedEdit.aspx page to the following:
[Code]....
For scenario 2 effect change the first MaskedEditExtender on the MaskedEdit.aspx page to the following:
I am using ASP.NET3.5. I have used MaskedEditExtender for currency purpose. when iam insering data into table it is accepting correct figures. while reading the same figures from database,I am displaying the figured in another textbox. (for second textbox i have used MaskedEditExtender) but it is displaying in that text box wrongly. suppose x=100 am reading this value from database and displaying x value in edit mode.but it is displaying 1.00. means it is taking last 2 digits as decimal points. how can I show in correct format?
I want to create Regular Expression for phone number and valid digits allowed are (,),-,+,0----9. If the left bracket ( is there,then its necessay that right bracket is also there. How to create the Regular Expression for the above. I dont know how to create the regular Expression,
area code should be entered in paranetheses is mandatory after area code there should be hypen and only three digit should be allowed to enter that is mandatory after 3 digit again hypen should be there that is mandatory and then 4 digit should be enter that is mandatory.
I want to get a formatted phone number from database as 123-123-1234I tried this but this is not workingtxtphone1.Text = String.Format("###-###-####", dt9.Rows(0).Item("Address"))
How to validate the textboxes to avoid wrong information..for ex: I have a textbox phoneNum in that users can only enter the nums only. how to validate that?