Techumber
Home Blog Work

Perfect Form Validations Using HTML5

Published on December 25, 2012

Previous days writing form validation is a very big task. Two-three years back I wrote my first form validation for a project. First time when I wrote that I really felt difficult. I remember it took nearly One day to write all validations(Including Regular Expressions). Perfect Form Validations Using HTML5

But present days form validations is not a separate task. Most of the web designers writing form validations itself when they html design code. This is all because of HTML5. Yap! HTML5 has very good set of built in validations. They work just as perfect as JavaScript validations. Of-course I know They don’t work IE<9. But if you are sure your readers use modern browser like Chrome,Firefox you could use HTML5 Validations Happily. HTML4 and HTMl5 If you take html4, to gather text as input we have only two basic elements textarea and input with type text. But in HTMl5 we have different other input types like email,date,url,etc. Which allow us to do all these form validations in html code. Basic Validations 1)Email validation 2)Field Required validation 3)URL validation 4)Date Validation 5)Number Validation 6)Min-Max Validation 7)Regular Express Validations

**1)Email Validation**

This a very simple one just see the code below you will under stand.

<input type="email" placeholder="Enter your email" />

2)Field Required Validation

<input
  type="email"
  placeholder="To test leave this blank and click submit"
  required="required"
/>

3)URL Validation

<input type="url" placeholder="Enter Url " />

4)Date Validation

<input type="date" placeholder="Date only" />

5)Number Validation

<input type="number" placeholder="Number only" />

6)Min-Max Validation

<input type="number" placeholder="Enter between 1-8" min="1" max="8" />

7)Regular Express Validations

<input type="text" placeholder="Caps only" pattern="[A-Z]" />

This very useful one if you not found your required validation in built in HTML5 validations you can create your own validation using this. This is just same as JavaScript Reg-Ex validations.