All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Validation For Mobile Number In HTML

Last Updated : Jul 1, 2023

Validation For Mobile Number In HTML

In this tutorial we will show you the solution of validation for mobile number in HTML, mainly there are many ways to apply validations. We can use JavaScript, jQuery and other languages to apply validation. But in this tutorial this is done with the help of html only.

Let us understand how we are able to done this article with the help of html only.

Step By Step Guide On Validation For Mobile Number In HTML :-

As, there are many ways with the help of which you are able to check whether the entered number is valid or not.

Let us create a code below with help of html inbuilt tags and attribute for validation.

Here, below we give you a code in html, we hope that you are able to understand what we do here.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
   </head>
<body>
   <form action="second.html" method="post">
        <label for="">
            Please enter your enter your mobile number
        </label>
        <input type="tel" name="phone" id="phone" placeholder="0123-456-789" pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}">
        <br><br>
        <label for="">
            please enter your telephone number
        </label>
        <input type="tel" name="nmbr" id="nmbr" pattern="[0-9]{4}-[0-9]{6}" placeholder="0161-123456">
<br><br>
        <label for="">
            please enter your mobile number
        </label>
        <input type="tel" name="nmbrone" id="nmbrone" pattern="[0]{1}[0-9]{10}" placeholder="09786231450">
<br><br>
        <label for="">
            please enter your mobile number
        </label>
        <input type="tel" name="nmbrone" id="nmbrone" pattern="[0-9]{10}" placeholder="0123456789">
        <input type="submit">
    </form>
</body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In body, here we first create a form as you see.
  6. After that under form we create some labels and under labels we create some input tags of type tel for telephones.
  7. For validation, we use pattern attribute. This attribute is used if we want to get data from user in required pattern.
  8. Here, we create different patterns for different formats of mobile number. And for user consideration that in which format he have to type number, we use here placeholders.
  9. Placeholder is a method to give user a hint that what he have to type and in which format. Placeholders are shown on input, you can see them by opening above code in browser.
  10. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that we are able to apply validation on mobile numbers that the number entered by user is according to your choice or not. I hope this tutorial on validation for mobile number in HTML helps you.