Skip to content

Phone Number Validation with HTML5

Last updated on November 20, 2017

In order to improve the security of the application, you should follow one of the fundamental principle called “Never trust user input data“. It is very important to add validation to the forms before submitting to the database as one malicious user input data can break the application.

We can do client and service side validations but here I am gonna show you client slide validations as those are more user-friendly than server side.

Luckily, You can implement the client side form validation easily with HTML5 without using jQuery. Here we gonna use a regular expression (regex) to validate a phone number along with pattern attribute of the HTML5 input field.

Regex for 10 Digit Phone Number

The following example code checks whether the user provided 10 digits numeric value (xxxxxxxxxx). The RegEX ^\d{10}$ matches the format hence the input element would look like this:

Phone Number (format: xxxxxxxxxx):

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). The RegEX ^\d{3}-\d{3}-\d{4}$ matches the format hence the input element would look like this:

Phone Number (format: xxx-xxx-xxxx):
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments