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
- 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
summary (old screenshot **old UI)
related
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.
1 Like
Nice job on this one. This one does a bit more of what I was looking for. Also you e showcase link is broken.