HTML5 Form Validations with Pattern Matching

HTML5 Form validation is another type of client side validation . In HTML5 validation no javascript or jquery needed. Using HTML5 we can validate form with pattern.

View Demo

Different type of Pattern Matching in HTML5

  1. Letter only
  2. Number only
  3. Email
  4. Password
  5. Phone no
  6. Alphanumeric
  7. URL

Letters Only
pattern=”[A-Za-z]+” accepts only capital or small letters.

Number only
pattern=”[0-9]+” accepts only numbers 0, 1, 2….

pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$” accepts valid email address

pattern=”(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}” accept at least one number and one uppercase and lowercase letter, and at least 6 or more characters

Phone no
pattern=”^d{10}$” accepts only numeric values with 10 digit.

pattern=”^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$” accepts alphanumeric values letters and digits.

pattern=”https?://.+” required title=”” accepts valid web url starting with http://.

View Demo

Download Source Code(HTML5 Form Validations with Pattern Matching)
Size: 724 Bytes
Version: V 1.0

About the author

Anuj kumar

I'm Anuj kumar a web developer with 4+ year experience .I write blogs in my free time. I love to learn new technologies and share with others. I founded PHPGurukul in September 2015. The main aim of this website to is provide php , jquery , mysql , phpoops and other web development tutorials. I am trying best effort to make PHPGurukul useful for every single moment spend on this website. If you think this website is useful to visit please share with your friend and buddies.

Leave a Comment

Subscribe For Latest Updates