Error with MaskedEditExtender in Ajax

Question

Hi All,

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.

My code is:-

<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.

Any idea?