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() ↩︎
6 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
1 Like
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.
would be nice if your help wasn’t stuck behind a paywall. can you post your solution here for the community’s benefit?
I’m still struggling to get this to work on my form. I’ve tried all the different pattern variations shown in this thread, but the form still accepts non-numeric characters.
Can someone help?
(I did check out Jarek’s article noted above, but wondering if there’s a simpler way to do this using the custom attributes?)
Here’s a read-only link to the page:
Can someone please help with this?
Hey Mark,
The form on the page you shared is a Jotform.
Jotform has its own extensive validation logic, including patttern support.
You’d need to check the docs there.
2 Likes