TextMode.Phone doesn't do any validation?

Viewed 3604

On my aspx page I have a textbox, which is placed on a modal window, together with an OK button:

<asp:TextBox runat="server" ID="contactInfo" TextMode="Phone" ToolTip="Please enter your phone number">01234/567890</asp:TextBox>
<asp:Button ID="btnOK" runat="server" Text="Ok" OnClick="btnOk_Click" />

However, the TextMode="Phone" doesn't seem to do any validation at all. Even if I enter absolute nonesense like "Hi, this is a text and definitely not a phone number" the page will not complain. If, for example, I change the TextMode to TextMode="Email", then a message will appear asking me to enter a valid e-mail address and the modal window stays open, no matter how often I try to click the OK button.

Right now I have to validate the phone number on the client side (as changing the TextMode to Number introduces a whole lot of other problems), but I would like to use the "framework solution" just as I am able to with TextMode.Email.

Is the validation check really not implemented for TextMode.Phone? I couldn't find anything helpful regarding this topic.

1 Answers

<asp:TextBox TextMode="Phone"> is a .NET element that gets rendered into <input type="tel"> HTML element and this HTML element does not automatically validate.

From MDN:

<input> elements of type "tel" are used to let the user enter a telephone number. Unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular format before the form can be submitted — this is because formats for telephone numbers vary so much around the world.

You can validate using a <asp:RegularExpressionValidator> with your desired regex.

For example:

<asp:RegularExpressionValidator ID="revPhone" runat="server"
   ErrorMessage="Not a valid phone" ControlToValidate="contactInfo" 
   ValidationExpression="^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$">
</asp:RegularExpressionValidator>
Related