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:


Categorized in:

HTML / CSS

Tagged in:

, , , , , , , ,