Validate Phone number Inputs in HTML5

In this article, you will learn how to validate a phone number input using HTML5.
Input elements of type tel allow a user to input telephone digits. What it however doesn’t provide, is validation to a particular format.

To achieve the said validation, we can use the pattern attribute which allows us to slot in Regular Expressions. Here’s an example of such which evaluates user input to this:
xxx-xxx-xxx

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