Click here to Skip to main content
13,050,242 members (98,156 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 23 Sep 2012

Easy Form Validation using HTML5

, 23 Sep 2012
Rate this:
Please Sign up or sign in to vote.
Writing validation logic using JavaScript in a HTML form is not an easy way. We all have seen it in HTML4 but what’s new in HTML5? Will it provide us easy way to validate the form with writing a small piece of code only?   Today we will be talking about this validation stuffs in HTML5.
This is an old version of the currently published article.

Writing validation logic using JavaScript in a HTML form is not an easy way. We all have seen it in HTML4 but what’s new in HTML5? Will it provide us easy way to validate the form with writing a small piece of code only?

Today we will be talking about this validation stuffs in HTML5. But as usual, all the browsers don’t support all of them but a good start to think for future.


Reference: Easy Form Validation using HTML5[^]



In HTML4, we had a single input type for entering text but in HTML5 we have different input types for entering different data types e.g. we have “email” data type for email address, “url” data type for entering website url, “number” for any numeric inputs and “text” data type for rest of the strings.

Not only this, HTML5 also supports placing watermark text as place holder text of any textbox. This gives the page designer and user easy way to understand about the input field. You can remember that this was way to difficult in earlier version of HTML and even in ASP.Net.

As usual, HTML still has an issue in terms of browser support. Though HTML 5 is not yet standardize, but all those features are not yet supported by all the browsers. Google Chrome and Firefox supports a vast no. of features but IE is lacking too behind.

Here is a comparison chart of HTML5 Validation support in different web browsers:

HTML5 Form Validation Support in Various Browsers


Look in the above chart and you will notice that the IE support is still missing. I tested them in IE 10 and it’s working there but not yet confirmed in browser compatibility chart.

Play with Code

To do easy validation using HTML5, you need to add the support of HTML5 in your page by adding this line first at the top of the page: 

<!DOCTYPE html>


Now you can chose between various data types to include in the form. Here is a code snippet where we used “text”, “email”, “url” and “number” data types to demonstrate this feature:

  <input type="text" placeholder="Enter your full name" required><br/>
  <input type="email" placeholder="Enter email address" required><br/>
  <input type="url" placeholder="Enter your website URL"><br/>
  <input type="number" value="1" min="1" max="5" placeholder="Enter no. of attendees">
  <input type="submit" value="Submit">


Check out the use of “placeholder” in the above code. It works just like a watermark text in the input textbox and provide the user the necessary information while empty. The “required” attribute asks the user to enter text and on validation fail, it marks the textbox in red and shows a styled tooltip in the screen to enter some valid text in that box.

Similarly, it always tests for proper data types and throws invalid input when the data type mismatches. The another interesting thing is with the “number” input type. It creates a range validation logic with “min” and “max” attributes and creates a numeric up-down field in the screen. This feature is not supported on all the browsers and you will see a simple textbox in case it’s not supported by that browser.


End Note

I hope that, this quick little post will help to understand the basics of HTML5 form validation and if you are using HTML5, this will help you to write less code to do such a big logic in your page.

Subscribe to my blog’s RSS feed and email newsletter to get immediate updates on latest news, articles and tips. I am available in Twitter. Connect with me there for technical discussions. I am also available in Facebook and Google+. Don’t forget to connect there too. Happy coding.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Technical Blog:
Twitter :

You may also be interested in...


Comments and Discussions

Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
GeneralMy vote of 1 Pin
AshutoshDave13-Feb-14 0:06
memberAshutoshDave13-Feb-14 0:06 
QuestionThanks Pin
Member 990844219-Mar-13 19:55
memberMember 990844219-Mar-13 19:55 
QuestionThis is very good article. Pin
Jayesh Sorathia20-Feb-13 2:14
memberJayesh Sorathia20-Feb-13 2:14 
QuestionThis feature works great on Android Pin
bizcad5-Oct-12 13:59
memberbizcad5-Oct-12 13:59 
AnswerRe: This feature works great on Android Pin
_ Kunal Chowdhury _5-Oct-12 15:34
mvp_ Kunal Chowdhury _5-Oct-12 15:34 
QuestionFeedback Pin
isenthil3-Oct-12 21:16
memberisenthil3-Oct-12 21:16 
AnswerRe: Feedback Pin
_ Kunal Chowdhury _3-Oct-12 22:35
mvp_ Kunal Chowdhury _3-Oct-12 22:35 
GeneralRe: Feedback Pin
isenthil4-Oct-12 9:18
memberisenthil4-Oct-12 9:18 
GeneralMy vote of 5 Pin
Rahul Rajat Singh3-Oct-12 18:29
memberRahul Rajat Singh3-Oct-12 18:29 
GeneralRe: My vote of 5 Pin
_ Kunal Chowdhury _3-Oct-12 22:34
mvp_ Kunal Chowdhury _3-Oct-12 22:34 
GeneralMy vote of 5 Pin
Gittu Dash3-Oct-12 9:53
memberGittu Dash3-Oct-12 9:53 
GeneralRe: My vote of 5 Pin
_ Kunal Chowdhury _3-Oct-12 22:32
mvp_ Kunal Chowdhury _3-Oct-12 22:32 
SuggestionFormatting... Pin
Sandeep Mewara22-Sep-12 20:00
mvpSandeep Mewara22-Sep-12 20:00 
GeneralRe: Formatting... Pin
_ Kunal Chowdhury _23-Sep-12 17:45
mvp_ Kunal Chowdhury _23-Sep-12 17:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 23 Sep 2012
Article Copyright 2012 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid