PHPGurukul

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.

<form>
<input type="text" pattern="[A-Za-z]+" title="letters only" required />
<input type="submit" />
</form>

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

<form>
<input type="text" pattern="[0-9]+" title="only letters" required />
<input type="submit" />
</form>

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

<form>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$" title="xyz@something.com" required />
<input type="submit" />
</form>

Password
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

<form>
<input type="password" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" title="at least one number and one uppercase and lowercase letter, and at least 6 or more characters" required />
<input type="submit" />
</form>

Phone no
pattern=”[0-9]{10}” accepts only numeric values with 10 digit.

<form>
<input type="tel" pattern="[0-9]{10}" title="10 numeric characters only" required />
<input type="submit" />
</form>

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

<form>
<input type="text" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$" title="alphanumeric 6 to 12 chars" />
<input type="submit" />
</form>

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

<form>
<input type="url" name="website" pattern="https?://.+" required title="http://phpgurukul.com" />
<input type="submit" />
</form>
View Demo
Download Source Code(HTML5 Form Validations with Pattern Matching)
Size: 724 Bytes
Version: V 1.0

Anuj Kumar

This is Anuj Kumar. I’m a professional 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 provide PHP, Jquery, MySQL, PHP Oops and other web development tutorials.
.

Recommended Tutorials for you


Add comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed