Phone Number Validation in HTML5

Phone number validation in HTML5 is a crucial security check in the form, which we need to do at the client-side to let the user know that he is filling a correct mobile number and also good for data collection.

So in this tutorial, you’ll be going to learn how to do phone number validation in HTML form using a pattern. We need HTML pattern for phone number validation.

You can also check :

  1. How to convert PHP array to JavaScript array
  2. How To Get Multiple Elements By Id Using Javascript
  3. How to remove duplicates from javascript array
Phone Number Validation In HTML5
Phone Number Validation In HTML5

The pattern is a regex which checks for the format of the value which we put in the HTML input. So when a user submits a form it checks for phone number format because we pass a regex of a phone number in pattern attribute of HTML input.

But the only pattern is not sufficient to fulfill our requirement. we need an HTML tag which is input type=”tel”, which is used for the telephone.

Phone Number Validation in HTML5 Using Pattern

So move to our code, we will going to show you multiple examples.

  <!-- html form tag -->
  <form>
    <label>Phone Number Format (xxx-xxx-xxx)</label>
    <!-- html input type=tel for phone number which contain a pattern -->
    <input type="tel"
           name="phone_number"
           id="phone_number"
           pattern="^\d{3}-\d{3}-\d{4}$"
           required="required"
          />
          
    <!-- html input type=submit for submit a form --> 
    <input type="submit" />
    
  </form>

So, in the above example, we have implemented a regex for phone number validation. This regex is only valid for Indian mobile number as they are total ten in length.

The different-different country has their own mobile number format that’s why you have seen on multiple websites they work internationally. That type of website ask for the country and then the mobile number.

Because each country also has its own unique country code like in India we have +91 which denote an Indian country code.

Using Regex for 10 Digit

Let’s look for a simple mobile number validation in HTML form by just passing 10 digit number limit validation format.

  <!-- html form tag -->
  <form>
    <label>Phone Number Format (xxxxxxxxx)</label>
    <!-- html input type=tel for phone number which contain a pattern -->
    <input type="tel"
           name="phone_number"
           id="phone_number"
           pattern="^\d{10}$"
           required="required"
          />
          
    <!-- html input type=submit for submit a form --> 
    <input type="submit" />
    
  </form>

Using Simple Mobile Number Validation Regex in Pattern [789][0-9]{9}

We can also use simple HTML pattern for mobile like first we make it mandate that initial number should be started with 7 or 8 or 9 and then it followed by a series of number up to 9 digits.

[789] this regex pattern ensures that the HTML input number starts with either 7 8 9.

Then, [0-9]{9} this ensure rest of the values is number and it’s up to nine-digit.

  <!-- html form tag -->
  <form>
    <label>Phone Number Format ((7|8|9)xxxxxxxx)</label>
    <!-- html input type=tel for phone number which contain a pattern -->
    <input type="tel"
           name="phone_number"
           id="phone_number"
           pattern="[789][0-9]{9}"
           required="required"
          />
          
    <!-- html input type=submit for submit a form --> 
    <input type="submit" />
    
  </form>

Conclusion :

As you can see there are many ways you can implement for phone number validation in html5. You can also use javascript and jquery to get the same result.

Without phone validation regex, we can not achieve this task. Bypassing different-different regex in patter. You can validate your country mobile number.

We can also use a library which is built-in CSS like bootstrap and also js and jquery library.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also read :

  1. How to remove duplicates from javascript array
  2. Responsive header in HTML and CSS
  3. Responsive sticky header using HTML-CSS-Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *