Phone Number Formatting Issue

Hi all,

I’m having trouble with getting a form field to format for phone entries.

*edit: The below apparently have to do with phone number validation but I was specifically looking to format the number input (i.e. adjust 1234567890 to 123-456-7890 or (123)-456-7890). The steps below do seem to work for validation.

Leaving this here for context but still looking for a way to format the number input.

I’ve tried the approach from this topic: Phone Number Input Validation

pattern=^(?:(\d{3})|\d{3})[- ]?\d{3}[- ]?\d{4}$

As well as this one from here: Phone Number Input Validation [redux] - #2 by Siton_Systems

pattern= ^[0-9-+s()]*$

Both to no avail. I’m thinking it might be something to do with the fact that there is some other things going on with the form I cloned from here: https://webflow.com/website/intl-tel-input-form

Hoping someone can provide some insight into what might be occurring and a possible solution. Thanks!

Read only: Webflow - Oberit

Published example: TEST - SMS Form (with Intl code) Ver. 2

Did you ever get this to work @Miles_Mitchell?

I’ve tired the above too but nothing seems to be working.

Unfortunately no :frowning: @danwilko
Just decided to live with it.

Hey Miles, what problem exactly are you having? I wasn’t clear from your Jan 14 post above, however important to note that pattern does not format data, it only validates it.

Browsers will treat a pattern mismatch as an error ( same as e.g. a required field that is submitted empty ), and display the title.

If you’re having issues getting the pattern to validate and restrict entry, I’ve seen issues with some versions of Chrome if you include the ^ and $ anchors in the pattern. You don’t need them. pattern validation assumes those anchors.

@memetican Ah your first point is a good distinction that I didn’t clarify! I was indeed looking to format the data. The actual number validation does seem to be working (see below).

CleanShot 2022-10-27 at 15.58.33

What I was trying to accomplish was to have a uniform format for the phone numbers that would play nicely with the endpoint (although, I think most tools I discovered afterwards were able to recognize most formats anyways.) Any idea how to accomplish that?

Regardless, I will adjust my post to make the formatting distinction. Thanks!

Hi @danwilko - assuming you weren’t trying to format your numbers (like I was), try @memetican’s suggestion.