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: [1]*$

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://stackoverflow.com/questions/37936138/html-validation-for-phone-numbers


  1. 0-9-+s() ↩︎

5 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

Hi All,

I’m trying to get this to work as well, but after inputting the code and attributes, it won’t allow me to click the button to submit my form. Can somebody please advise?

Thanks!

I wrote an article how to do it using libphonenumber JavaScript library (bonus - the phone is also formatted as you type). Perhaps someone will find it useful: Phone number validation and formatting in Webflow forms | by Jarek Lipski | Webflow Sprinkles | Medium

Here’s the showcase link / read-only link.