Written by
Pavel Karpisek
Pavel Karpisek
Published on
March 23, 2023
5 min read

Phone number input formatting and validation in Webflow

Phone number input formatting and validation in Webflow

Related articles

See the number input formatting and validation in action: https://how-to-webflow-clonable.webflow.io/phone-formatting-in-webflow

1) Click on the phone input element and change the ID to "application-form-phone"

2) Put this code before </body> tag


<script src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1/bundle/libphonenumber-min.js"></script>
<script>
  const DEFAULT_COUNTRY = "US";
  const formatter = new libphonenumber.AsYouType(DEFAULT_COUNTRY);
  const phoneInput = document.getElementById("application-form-phone");
  phoneInput.addEventListener("input", function (event) {
    formatter.reset();
    const newValue = formatter.input(phoneInput.value);
    phoneInput.value = newValue;
    if (!libphonenumber.isValidPhoneNumber(newValue, DEFAULT_COUNTRY)) {
      phoneInput.setCustomValidity("Invalid phone number");
    } else {
      phoneInput.setCustomValidity("");
    }
  });
</script>

You're done!

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Home
Reviews
Ynvisible
Blog
Contact

Suggested articles

Unleash Your Imagination: Grab Our Studio's Epic Capability Deck!

Thanks for downloading the
Epic Capability Deck

  1. Check your mailbox
  2. Click on the Link
  3. Download the PDF
Oops! Something went wrong while submitting the form.