Html 5 Mobile Number Validation

Html 5 Mobile Number Validation

In this post we are going to see HTML5 validation. Validation plays a major role in to securing a form in website. Now we learn about mobile number validation in HTML5 done by adding pattern attribute in the input field.

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

The on top of code validates a ten digit number. As seen within the code, it’s terribly easy no JavaScript or jQuery code is needed. The code is explained below.

  • Input text field for getting into the number.
  • Max length to limit the characters entered in just ten.
  • Pattern attribute specifies the expression for checking the value of an input field. The pattern relies 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 number is mandatory.
  • The title attribute is for describing the pattern of the users.

More Examples:

<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>

Demo:


Praveen Kumar

I am a fullstack web developer with a passion for SEO, creating stunning websites, and organic marketing. I am a perfectionist.

Post navigation