MaskedEditExtender not holding Mask after clicking away

Question

I cannot figure out why my one field (Phone Number) isn't holding its MaskedEditExtender after you click away, while the others work just fine. I compared the properties and controls and they're all the same.

I suspect that it has something to do with my Validation Expression not matching my Mask, but when I tried adding in the exceptions for the symbols [() and -], it didn't work (or I did it wrong).

The problem child:

<div class="col-xs-6">
    <asp:TextBox
        runat="server"
        ID="TextBox_PhoneNumber"
        class="form-control"
        Style="max-width: 145px" />
    <asp:RegularExpressionValidator
        ID="RegularExpressionValidator_PhoneNumber"
        runat="server"
        ControlToValidate="TextBox_PhoneNumber"
        ErrorMessage="Invalid phone number."
        ValidationExpression="^[2-9]\d{2}\d{3}\d{4}$"
        Display="Dynamic"
        SetFocusOnError="True"
        Font-Bold="true"
        ForeColor="red"
        ValidationGroup="ValidationGroup_Main" />
    <asp:RequiredFieldValidator
        runat="server"
        ID="RequiredFieldValidator_PhoneNumber"
        ControlToValidate="TextBox_PhoneNumber"
        ErrorMessage="Employee Info: Phone Number is blank."
        Text="Required"
        class="text-right"
        Display="Dynamic"
        Font-Bold="true"
        ForeColor="red"
        ValidationGroup="ValidationGroup_Main" />
    <ajaxToolkit:MaskedEditExtender ID="maskededitextender_PhoneNumber" runat="server" TargetControlID="TextBox_PhoneNumber" Mask="(999) 999-9999" MaskType="Number" AcceptNegative="None" AutoComplete="false" />

Resulting in (while entering the phone number):

Resulting in (after clicking away after entry):

How can I get that mask to stick?

score 2 · Answer 1 · answered May 20 '16 at 14:07

Figured it out myself:

In the "MaskedEditExtender", I needed to add this control:

ClearMaskOnLostFocus="false"

This forces the mask to stick at all times. I applied this to all of my other Masks now too (Dates, Zipcode, etc).

The reason my Date fields weren't having this problem is because the "MaskType" of the "MaskedEditExtender" was set to "Date". There isn't one for Phone Number, and therefore it was treating it as either a number or nothing, neither of which have default Phone Number formatting like Date does.

However this did mess up my ValidationExpression in the Regex (because it was counting the Validation Expression as part of the data being submitted, and therefore I needed to add the formatting that my mask was using to my expression), but I just adjusted it to this:

ValidationExpression="^\([2-9]\d{2}\) \d{3}\-\d{4}$"

Success!

Hope this helps somebody else.

MaskedEditExtender not holding Mask after clicking away

1 Answers1