Mobile Number Validation using HTML5 Pattern and Regex

While collection personal data you need to make sure all data should be correct so that in future you can easily get in touch with your customers. You must put data validation before submitting form, you can easily validate form data after HTML5 release, HTML5 will help to quick place validation on input field. Here I am going to show two quick method to validate phone number so that user have to enter valid mobile number before submitting form.


Method-1: Mobile Number Validation using HTML5 Pattern

Following method help website owner to collect correct mobile number while entering by user with valid format.

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

Method-2: Mobile Number Validation using Regex for 10 Digit

Following example restrict user must need to enter 10 digit phone number. By adding pattern attribute with following pattern (^\d{10}$).

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