Html 5 Mobile Number Validation - Mostlikers

28 May, 2013

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.

Html 5 Mobile number validation

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









Related Topics

  • PHP Email and mobile number validation script
  • Analyze and optimize your website with google PageSpeed tools
  • Find latitude and longitude with Google Maps
  • Generate RSS Feed for website using php and json script
  • Ajax add,view and delete using mysqli
  • Active and inactive users concept using php and Ajax
  • How to Make a Simple Search Engine using PHP and MySQLi
  • PDO basic insert,view,update,delete with php function
  • Send email with html template using php
  • Login with facebook using codeigniter

No comments:

Post a Comment