Home / Web Development / HTML / Form Validations with Pattern Matching – HTML5

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.

Syntax

Description

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

Letters

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.

Numbers

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

E-Mail

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

URL

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

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 *

Social Media Auto Publish Powered By : XYZScripts.com