Form Validations with Pattern Matching – HTML5

Good Morning To all,
In the above article we have the basic idea related to server side form validation. Now we focus the client side form validation in php code. In the server side form validation developed by using Jvascript or Jquery method. But in the Client Side Validation method no jQuery or JavaScript needed. The pattern is new attributes in HTML5.



regularexpression: Specifies a regular expression that the <input> element’s value is checked against.

We Will See The Following:

  1. letters only
  2. numbers only
  3. email
  4. URL
  5. phone no
  6. alphanumeric


The pattern=”[A-Z]+” accept only capital letters. And also pattern=”[a-z]+”accept only small letters.
Combine capital and small letter with pattern=”[A-Za-z]+” method in HTML.


pattern=”[0-9]+” accepts only numbers 0, 1, 2,3,4,5,6,7,8,9


pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$” accepts valid email address. And we also use input type=”email” in HTML5.


In input type=”url and pattern=”https?://.”” accept only valid url like http://….

Phone Number

Accept onlynumeric characters and specify the number limit. Specify the phone number upto the limit these limit and numbers are specify in pattern.
Also inputtype=”tel” in HTML5.

Alpha Numeric

Specify the alphanumeric characters.

Full Code

Server Side Form validations Using PHP

HTML5 Form Validations with Pattern Matching

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Leave a Reply

Your email address will not be published. Required fields are marked *