HTML5 Form Validation With Regex


There are two ideas that enters the scene now:

  • The tag has new type attribute values like url, email, date, telephone number, and color.
  • The tag has the new attribute pattern where you can describe allowed input with a regex.

Here are three pragmatic (but not globally perfect) examples I created:


Strong password: <input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

Email address: <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Phone number: <input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

HTML 5


Lets see a typical HTML5 page markup:

<!doctype html>
<html>
<head>
   <title></title>
</head>
<body>
   <header>
       <h1></h1>
       <nav>
           <ul>
               <li><a href="#">link 1</a></li>
               <li><a href="#">link 2</a></li>
               <li><a href="#">link 3</a></li>
           </ul>
       </nav>
   </header>
 Continue reading