HTML INPUT PATTERN ATTRIBUTE

Form validation with just HTML and CSS

What is the pattern attribute?

The pattern attribute is an attribute of the text, tel, email, url, password, and search input types. Vist MDN for more detailed explanation

Examples :

1. Email Validation

   • RegExp :

     ^\S+@\S+\.com+$

   • HTML:

   <div class="input-field">
     <input
       placeholder="E-Mail"
       pattern="^\S+@\S+\.com+$"
       type="email"
       class="input-control"
     />
     <span>Please, enter a valid E-Mail!</span>
   </div>

   • CSS:

   .input-control {
     border: 2px solid #1e419a;
     width: 100%;
     height: 3rem;
     padding: 0.5rem;
     border-radius: 4px;
     font-size: 1.2rem;
     margin-bottom: 0.25rem;
     outline: none;
   }
   
   .input-control + span {
     display: none;
     font-size: 0.8rem;
     color: #fa0606;
   }
   
   .input-control:invalid {
     border: 2px solid #fa0606;
   }
   
   .input-control:invalid + span {
     display: block;
   }

   • Results:-

     • Valid:
       

       

     • Invalid:
       
       

2. Full Name Validation

   • RegExp:

     (\w+\s+){1,}\w+

     The regular expression above matches 2 or more names as the valid input

   • HTML:

     <div class="input-field">
       <input
         placeholder="Full Name"
         pattern="^(\w+\s+){1,}\w+\s*$"
         type="text"
         class="input-control"
       />
       <span>Please, enter a valid full name</span>
     </div>

   • CSS : Click to go back to style

   • Results:-

     • Valid:
       

     • Invalid:
       
       

3. Strong Password Validation

   • RegExp:

     ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*]).{8,}$

     The regular expression matches characters of 8 or length that contains small, capital letters, numbers anad special characters

   • HTML:

     <div class="input-field">
       <input
         placeholder="Password"
         pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*]).{8,}$"
         type="password"
         class="input-control"
       />
       <span>
         Password must contain 8+ : small, capital letter(s), number(s), special
         character(s)!
       </span>
     </div>

   • CSS : Click to go back to style

   • Results:-

     • Valid:
       

     • Invalid:
       
       

Links :-

• View at CodePen
• View at StackBlitz