Streaming live at 10am (PST)

Phone Number Input Validation [redux]


#1

Continuing the discussion from Phone Number Input Validation:

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


#2

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 by tiny JS code

2.1.Add #id to phone feild

2.2. Change attribute

<script>
 /* select the feild by id - name match to the name in step 2.1 */
var phoneField = document.getElementById("phoneField"); 
 /* change attribute */
phoneField.setAttribute("type", "tel");
</script>

image

Where to put this code? (per page, global site -or- embed code)

summary

related




#3

Thank you very much for this, Ezra!


#4

Mark as solution. Thanks


#5

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.