5 Ways to Implement 10-Digit Phone Number Validation in HTML

Validating that a phone number has exactly 10 digits is a basic but important step for data quality. We will walk through three common HTML methods for this, providing code for each. Then, we'll look at the pitfalls of these approaches and how Abstract API can solve them.

How to Implement 10-Digit Phone Number Validation in HTML

Here are three HTML-based methods to validate a phone number for exactly 10 digits. Each approach uses different built-in browser features to enforce the constraint on the input field.

Native Pattern and Length Attributes

This method uses the browser's constraint engine to enforce a 10-digit number without JavaScript. It works on an input field with the type set to "tel". The "pattern" attribute provides a regular expression, "\d{10}", that the input value must satisfy. The "minlength" and "maxlength" attributes add another numeric guard, and the browser blocks input outside this range. Because this approach leverages the built-in constraint system, the field automatically works with form-level validity and can be styled when invalid.

<input
  type="tel"
  name="phone"
  inputmode="numeric"
  pattern="\d{10}"
  minlength="10"
  maxlength="10"
  title="10 digits, no separators"
  required>

Numeric Input with a Range

If you need an integer value and can disregard leading zeros, you can use the number input type. This method does not require a regular expression. The "min" and "max" attributes define an inclusive numeric range, from "1000000000" to "9999999999". The browser ensures the value stays within this range. It exposes violations through the validity API with properties like "rangeOverflow" and "rangeUnderflow".

<input
  type="number"
  name="phone"
  min="1000000000"
  max="9999999999"
  step="1"
  required>

Custom Validity with the Constraint Validation API

For logic that the "pattern" attribute cannot express, you can use JavaScript and the Constraint Validation API. This gives you more control over the validation rules. You select the input field and define a regular expression to test for ten digits. An event listener on the "input" event triggers the validation logic as the user types. The "setCustomValidity()" function sets a custom error message if the input is invalid. This method connects to the same validity pipeline that the "pattern" and "minlength" attributes use.

const field = document.querySelector('#phone');
const tenDigits = /^\d{10}$/;

field.addEventListener('input', () => {
  field.setCustomValidity(
    tenDigits.test(field.value) ? '' : 'Need exactly 10 digits'
  );
});

document.querySelector('form').addEventListener('submit', e => {
  if (!e.target.checkValidity()) e.preventDefault();
});

Challenges of 10-Digit Phone Number Validation in HTML

While these HTML methods provide a first line of defense, they come with significant limitations. These client-side checks often fail to account for real-world complexities in phone number formats and rules.

• The input type="tel" specification deliberately avoids syntax enforcement. The pattern attribute supports only basic regex, so it cannot encode complex North American Numbering Plan rules, like the disallowance of N11 prefixes, without additional code.
• Users may show a numeric keypad but can still paste non-numeric characters like parentheses, dashes, or even emoji. HTML alone cannot normalize these inputs, so front-end regexes either accept noise or block legitimate formats.
• The ten-digit format is a North American convention. A hard-coded constraint, whether through the pattern attribute or a numeric range, breaks when an application must also accept international numbers with different formats and lengths.
• Numeric validity extends beyond length. For example, some area codes cannot start with 0 or 1. An HTML regex in the pattern attribute or custom validation script cannot track these dynamic rules, so a valid-length number may be unroutable.