Streaming live at 10am (PST)

Phone Number Input Validation [redux]

Continuing the discussion from Phone Number Input Validation:

Has anybody found out how to force numeric input in Webflow form input fields? Thanks.

1 Like

step 1 - add pattern

Add this custom attribute to phone feild
image

  • name: pattern
  • value: ^[0-9-+s()]*$

The code behind scene:
<input type="tel" pattern="^[0-9-+s()]*$" placeholder="Telephone Number" required>

numbers (0-9), the minus symbol (-), the plus symbol (+) as well as spaces (s) and parentheses (()) are allowed.

https://martinwolf.org/before-2018/blog/2015/04/html5-telephone-input-validation/

Step 2 - Change type to tel

image

summary (old screenshot **old UI)

related

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel


3 Likes

Thank you very much for this, Ezra!

1 Like

Mark as solution. Thanks

Hi Ezra. I used the attached settings since in my case the phone field is optional and I’m after 11-digit UK phone numbers without any symbols. It probably could be done more neatly but seems to work ok. Thanks.

in the pattern value you can change it by regex. It is an easy and more powerful method. here is the code : ^([+])?([^\\d]?\\d){5,18}$
But i quit using regex because it has his limitations (It allows only 5 to 18 digits with up to 1 character between digits) and started using Veriphone