Phone Number Validation with HTML5

It is important to take security seriously when you collecting data from the users. Form data validation is required before submitting to the database. Client-side validation is more user-friendly than server-side. You can implement the client-side form validation easily with HTML5 without using jQuery. Here we will show how you can integrate phone number validation with HTML5.

To validate a phone number with a regular expression (regex), we will use type and pattern attribute in HTML input field.

Phone Number Validation with Pattern

The following example code validates a phone number and checks whether the user provided a phone number in the correct format (xxx-xxx-xxxx).

<form>
  Phone Number (format: xxx-xxx-xxxx):
  <input type="tel" pattern="^\d{3}-\d{3}-\d{4}$" required >
  
  <input type="submit" value="Submit">
</form>

Regex for 10 Digit Phone Number

The following example code checks whether the user provided 10 digits numeric value (xxxxxxxxxx).

<form>
  Phone Number (format: xxxxxxxxxx):
  <input type="tel" pattern="^\d{10}$" required >
  
  <input type="submit" value="Submit">
</form>