Click here to Skip to main content
15,867,750 members
Articles / Web Development / HTML5

Easy Form Validation using HTML5

Rate me:
Please Sign up or sign in to vote.
4.82/5 (8 votes)
5 Oct 2012CPOL3 min read 41.1K   13   14
Easy form validation using HTML5

Image 1

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

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

Reference: Easy Form Validation using HTML5[^]

Introduction

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 a website URL, number for numeric inputs, and text data type for strings.

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

As usual, HTML still has an issue in terms of browser support. HTML 5 is not yet standardized, and all those features are not yet supported by all browsers. Google Chrome and Firefox support a vast number of features but Internet Explorer is lacking way behind.

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

HTML5 Form Validation Support in Various Browsers

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

Playing with Code

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

HTML
<!DOCTYPE html>

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

HTML
<form>
  <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">
  <br/><br/>
  <input type="submit" value="Submit">
</form>

Check out the use of “placeholder” in the above code. It works just like a watermark text in the input textbox and provides 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. 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 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 you understand the basics of HTML5 form validation and if you are using HTML5, this will help you write less code to do such 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 on Twitter. Connect with me there for technical discussions. I am also available on Facebook and Google+. Don’t forget to connect there too. Happy coding.

License

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


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead 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 app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
GeneralMy vote of 1 Pin
AshutoshDave13-Feb-14 0:06
AshutoshDave13-Feb-14 0:06 
QuestionThanks Pin
Member 990844219-Mar-13 19:55
Member 990844219-Mar-13 19:55 
QuestionThis is very good article. Pin
Jayesh Sorathia20-Feb-13 2:14
Jayesh Sorathia20-Feb-13 2:14 
QuestionThis feature works great on Android Pin
bizcad5-Oct-12 13:59
bizcad5-Oct-12 13:59 
AnswerRe: This feature works great on Android Pin
Kunal Chowdhury «IN»5-Oct-12 15:34
professionalKunal Chowdhury «IN»5-Oct-12 15:34 
QuestionFeedback Pin
isenthil3-Oct-12 21:16
isenthil3-Oct-12 21:16 
AnswerRe: Feedback Pin
Kunal Chowdhury «IN»3-Oct-12 22:35
professionalKunal Chowdhury «IN»3-Oct-12 22:35 
GeneralRe: Feedback Pin
isenthil4-Oct-12 9:18
isenthil4-Oct-12 9:18 
GeneralMy vote of 5 Pin
Rahul Rajat Singh3-Oct-12 18:29
professionalRahul Rajat Singh3-Oct-12 18:29 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»3-Oct-12 22:34
professionalKunal Chowdhury «IN»3-Oct-12 22:34 
GeneralMy vote of 5 Pin
P_Dash3-Oct-12 9:53
professionalP_Dash3-Oct-12 9:53 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»3-Oct-12 22:32
professionalKunal Chowdhury «IN»3-Oct-12 22:32 
SuggestionFormatting... Pin
Sandeep Mewara22-Sep-12 20:00
mveSandeep Mewara22-Sep-12 20:00 
GeneralRe: Formatting... Pin
Kunal Chowdhury «IN»23-Sep-12 17:45
professionalKunal Chowdhury «IN»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.