HtmlHow-ToBeginner · 3 min read

How to Validate Phone Number in HTML: Simple Guide

To validate a phone number in HTML, use the <input> element with type="tel" and add a pattern attribute with a regular expression to specify the allowed format. This ensures the browser checks the input before form submission.

📐

Syntax

The basic syntax to validate a phone number in HTML uses the <input> tag with type="tel" to indicate phone input. The pattern attribute holds a regular expression that defines the allowed phone number format. The required attribute can be added to make the field mandatory.

type="tel": tells the browser this input is for a phone number.
pattern="regex": sets the format rules using a regular expression.
required: makes sure the user cannot leave the field empty.

html

<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

Output

A phone input box that requires a number in the format 123-456-7890 before submitting.

💻

Example

This example shows a simple form with a phone number input. It requires the user to enter a phone number in the format 123-456-7890. If the input does not match, the browser will show a message and prevent form submission.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phone Number Validation</title>
</head>
<body>
  <form>
    <label for="phone">Phone Number (format: 123-456-7890):</label><br>
    <input type="tel" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required aria-describedby="phoneHelp">
    <small id="phoneHelp">Format: 123-456-7890</small><br><br>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A form with a labeled phone input box requiring the format 123-456-7890 and a submit button. Invalid input blocks submission with a browser message.

⚠️

Common Pitfalls

Common mistakes when validating phone numbers in HTML include:

Not using type="tel", which can affect mobile keyboard layouts.
Using a pattern that is too strict or too loose, causing valid numbers to be rejected or invalid ones accepted.
Forgetting to escape backslashes in the pattern attribute in HTML code.
Not providing user guidance on the expected format.

Always test your pattern with real phone number examples and provide clear instructions.

html

<!-- Wrong: pattern missing or incorrect -->
<input type="text" pattern="[0-9]{10}">

<!-- Right: type tel with clear pattern and guidance -->
<input type="tel" pattern="\d{3}-\d{3}-\d{4}" required aria-describedby="phoneHelp">
<small id="phoneHelp">Format: 123-456-7890</small>

Output

Two input fields: the first accepts any text with 10 digits but no format guidance; the second requires a phone format with user help text.

📊

Quick Reference

Attribute	Purpose	Example
type="tel"	Defines input as phone number
pattern	Regular expression to validate format	pattern="\d{3}-\d{3}-\d{4}"
required	Makes input mandatory
aria-describedby	Links to help text for accessibility	aria-describedby="phoneHelp"

✅

Key Takeaways

Use to enable phone-specific input features.

Add a pattern attribute with a regex to enforce phone number format.

Include the required attribute to prevent empty submissions.

Provide clear format instructions for better user experience.

Test your pattern with real phone numbers to avoid validation errors.