Search code examples
asp.netregexmasking

Make MaskedEditExtender Mask optional

Here I have a MaskedEditExtender, with a validator using a regex.
It validates phone numbers with 8 or 9 digits:

<asp:TextBox Style="width: 135px" ID="txtTelefone" runat="server"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender
    ID="MaskedEditExtender_Telefone"
    TargetControlID="txtTelefone"
    runat="server"
    Mask="\(99\)9999NN9999"
    OnInvalidCssClass="txt-TextBox-Error"
    ValidateRequestMode="Enabled"
    ErrorTooltipEnabled="True"
    Filtered="-"
    PromptCharacter=" "
    ClearMaskOnLostFocus="false"/>
<ajaxToolkit:MaskedEditValidator
    ID="MaskedEditValidator_Telefone"
    runat="server"
    ControlExtender="MaskedEditExtender_Telefone"
    ControlToValidate="txtTelefone"
    ValidationExpression="^\(\d\d\)\d\d\d\d+-\d\d\d\d$"
    Display="Dynamic"></ajaxToolkit:MaskedEditValidator>

The issue is: as you can see in the regex, the user can put 4 or 5 digits between the ')' and the '-'.
But the "Mask" field doesn't allow it.

I need the MaskedEditExtender to stop crying when I don't type all the characters, because they're not necessary. All I need to validate my field is the regex.
The MaskedEditExtender is there only to give a mask that allows me to type only numbers and have a (99) in the beggining. It does not need to validate anything.

Solution

  • Well, seems like there's no such functionality in MaskedEditExtender that allows you to put less than the characters in the mask, so I did a small workaround:
    I've put autocomplete in the mask, adapted the regex to accept an empty space in the end of the string and trimmed it everytime I wanted to use the TextBox's value.

    • In MaskedEditValidator:ValidationExpression="^\(\d{2}\)\d{4,5}-\d{4} *$"
    • In MaskedEditExtender:AutoComplete="true" AutoCompleteValue=""
    • In CodeBehind: txtTelefone.Text.Trim();

    With this, all unfilled characters will be replaced as space in the end of the string, the regex will take care of the validation, and the Trim() will remove the spaces. Thus allowing you to make the Mask's length optional.