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.
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: International Telephone Input - Webflow
Hoping someone can provide some insight into what might be occurring and a possible solution. Thanks!
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).
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!
