Phone Number Validation with HTML5

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 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:

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets. Protection Status