Phone Number Input Validation

Community resources Webflow Tips
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.

  1. Click the “+” again to create your second Custom Attribute

  2. 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.

9 Likes
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?

9

amazing, thanks this is a very helpful tutorial

1 Like
10

How does one modify the “Please match the requested format” message?

12

Probably it’s not working anymore.

Here’s my new solution you can try it out:

pattern = "^[0-9-+s()]*$"
13

Can’t Webflow implement a native solution for this?

2 Likes
14

For anyone else wondering this, you can use HTML5’s title attribute.
e.g. title="Enter a valid U.S. phone number"

Set this as custom attributes on your INPUT element. Most browsers will display it when there is a validation error.

15

Ha ha for phone number validation?
Which one?

16

Just to add, patterns are already anchored to the start and end of the line, so you don’t need the leading ^ or the trailing $. They seem to cause problems in some browsers as well, so might be best to leave them out.

See if that helps when it doesn’t appear to be working properly.

2 Likes
17

I created this script with Slater App for validating the phone format input, it worked like a charm! :sparkles:

Remember to change the “Phone-2” ID for your input ID. Hope this is helpful!

<script>
// Get the input field
const phoneInput = document.getElementById("Phone-2");

// Add an event listener to the input field
phoneInput.addEventListener("input", function() {
  // Get the input value
  const inputValue = phoneInput.value;

  // Remove any non-numeric characters from the input value
  const numericValue = inputValue.replace(/\D/g, "");

  // Update the input value with the numeric value
  phoneInput.value = numericValue;
});
</script>
1 Like