Validating Phone Numbers

By comparison with email addresses, phone number are much more difficult to format-validate, particularly when you need to support various international phone number formats.

Approaches

Input Type

Webflow supports the Phone input type, which generates the input as type=tel, however it only offers very general validations.

Regex and HTML field constraints

You can use custom attributes to constrain input features, e.g. for a UK number;

• pattern = *(0-9)*
• maxlength = 11
• minlength = 11

This approach can be combined with the Input type = Phone.

3rd Party Validation Libs

Libphonenumber

Open source project which appears to have been taken over by Google;

https://libphonenumbers.js.org/docs/

https://github.com/google/libphonenumber

DEMO - https://htmlpreview.github.io/?https://github.com/google/libphonenumber/blob/master/javascript/i18n/phonenumbers/demo-compiled.html

Add the library;

<script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.10.58/libphonenumber-js.min.js" integrity="sha512-j/BCk7lV3GHPfc7h2AUpe+LJmqC2yypehBlLa6QOepHBpZfcb0qRm+o8A8M0BqG7WGwOhZpdPbQdhLb3TBDOdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Configure your code for your element;

document.getElementById('yourFormId').addEventListener('submit', function(event) {
  var phoneNumberInput = document.getElementById('phoneNumber').value;
  var country = 'US'; // Change this based on the input or your application's context
  var isValidNumber = libphonenumber.isValidNumber(phoneNumberInput, country);
  
  if (!isValidNumber) {
    alert('Please enter a valid phone number.');
    event.preventDefault(); // Prevent form submission
  }
});

Also supports a special mode for an AsYouTypeFormatter.

https://libphonenumbers.js.org/docs/inputDigit

3rd Party Service API

If you want deeper validation, to ensure that a number is actually registered and to know what carrier handles it, you can use a service like Veriphone.

https://veriphone.io/

Examples

Treat these as starting points as they have not been thoroughly tested.

For all of these, set the input field type to Phone ( tel ).

US Format Number Validation

• pattern = \d{3}[-]\d{3}[-]\d{4}
• title = _{US phone number (format: 123-456-7890)}

Mexico

• pattern = 01[-]\d{3}[-]\d{3}[-]\d{4}
• title = Mexican phone number (format: 01-123-456-7890)

Germany

• pattern = \+49 \d{4} \d{6}
• title = _{German phone number (format: +49 1234 567890)}

UK

• pattern = \+44 \d{4} \d{6}
• title = UK phone number (format: +44 1234 567890)

‍

‍

‍

‍

‍

‍

Notes

https://discourse.webflow.com/t/phone-number-input-validation-redux/62455/9

‍

‍

‍

‍

‍