Html 5 Mobile Number Validation

Hi, Guys, this a new post on Html 5 Mobile number validation. Validations play a major role in getting a genuine information or securing the website. We find many plugins on the internet for validating data from the visitors. Validations can be done by various languages like jQuery, PHP, JavaScript, and HTML5.

In this post, we will be learning mobile number validation by HTML5. It is done by adding few attributes to the input field.

Code

<form action="">
  <input type="text" maxlength="10"  pattern="[0-9]{10}" title="Enter your mobile number"

     required>
  <input type="submit">
</form>

 The above code validates a 10 digit number. As seen in the code, it is very simple no JavaScript or jQuery code is required. The code is explained below.

•  Input text field for entering the number.
• Max length to restrict the characters entered in only 10.
• Pattern attribute specifies the expression for checking the value of an input field. The pattern is based on the regular JavaScript expression. The square brackets '[ ]' tells whether to validate text a-z or numbers 0-9 and flower bracket '{ }' for telling the number of characters to enter.
• Required attribute is added if the phone number is mandatory.
• The title attribute is for describing the pattern of the users.

 More Examples for better understandings:

<form action="">
  <input type="password" maxlength="4"  pattern="[0-9]{4}"  required>
  <input type="submit">
</form>

<form action="">
  <input type="search"  pattern="[a-z]{10}" title="Enter ten character search keyword">
  <input type="submit">
</form>

"Excellence is a continuous process and not an accident. "
                                             
                                         - A. P. J. Abdul Kalam