Streaming live at 10am (PST)

Phone Number Input Validation


#1

The following steps will allow telephone number input validation without need for JavaScript or HTML coding using only Webflow.

1) Select and highlight the form input field for a telephone number entry

2) Click the cogwheel for special settings

3) Under "Input Settings" / "Placeholder" enter something like "Phone* 555-555-5555 to instruct the user that the entry will require standard US phone number formatting.

4) Under "Input Settings" / "Text Type" make sure "Plain" is selected

5) Click the check box for "Required" (a personal preference but not necessary...however, without this box checked, then there is no need to validate the field, right?)

6) Under "Custom Attributes" click the "+" and a pop-up window will appear

Under "Name" enter "maxlength" without the "".

Under "Value" enter "14" without the "". This will force the maximum length of the input field to max of 14 characters and will make the attribute function very smooth without errors or confusion for the user.

Finally, click "SAVE". If all worked correctly then you will have created a new "Custom attribute" that will say maxlength="14". The = sign and the "" will auto populate.

8) Click the "+" again to create your second Custom Attribute

9) Again, the pop-up window will appear. Enter the following into the Name and Value fields:

Under "Name" enter "pattern" without the "".

Under "Value" enter "^(?:(\d{3})|\d{3})[- ]?\d{3}[- ]?\d{4}$" without the "".

I suggest you copy and paste to get it exactly correct. You must enter the Value exactly so it begins with ^ and ends with $. Make sure NOT to enter the "".

Finally, click "SAVE". If all worked correctly the second "Custom attribute" will say pattern="^(?:(\d{3})|\d{3})[- ]?\d{3}[- ]?\d{4}$". Again the = sign and the "" will auto populate.


Testing it out...and final thoughts

Go to the preview mode of your form and enter a telephone number into the input field.

The form will not submit unless the user enters a US telephone number format as specified by the pattern string you entered above. Best part of all....it will automatically show a Webflow pop-up that says "Please match the requested format." if you cause an error. NICE!!

It will NOT accept letters and will force the user to enter only telephone format.

It will accept any and all combinations of area codes, with or without parentheses and/or with or without dashes, etc. It is a very functional format for all US telephone numbers. By leaving the maxlength at 14, it will force the user to enter only the most common US telephone formats. You can play around with the maxlength value, but I found 14 is the best.

Good luck!! Let me know if you have any issues.


Phone Number Input Validation [redux]
#2

very helpful @mtsurgery. Looking forward to trying this out!


#3

cool... just I what need. Added the snippet... will play with it.

Thanks a lot @mtsurgery


#4

I thought I was able to get this to work.... several months ago.

But today - when I went to use it... it did not work.

Am I missing something here ?

Basically give it 2 attributes - maxlength and pattern - and give each a value.

maxlength = 14
patter n= ^(?:(\d{3})|\d{3})[- ]?\d{3}[- ]?\d{4}$

Maxlength works...
pattern is not working though... seems to allow non-numeric characters.


#5

Has anyone found a solution to restrict non-numeric characters input? Does it require any JavaScript or can be done with Webflow capabilities?


#6

Has anyone figured out a solution?


#7

#8