HTML5 Form Validation

Since the creation of the web, developers have deal with validation of forms, a way to ensure the correct input of data to benefit both the business logic (not having dirty data) and the development of the rest of the application (ensuring that server side data processing gets already filtered info). HTML5 has come with many awesome features and one of those is very good news to many people that has to do forms all the time. HTML5 now has attributes that handles this task, so the browser will take charge of this.

A typical form consist of a opening and closing <form> tag, and inside we put <input> tags with different types based on our needs. You might want to use <label>, <textarea>, <select> and <fieldset> as well.

<form action="" autocomplete="off">
    <label for="username">Username</label>
    <input id="username" name="username">
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
    <input type="submit" class="btn" value="Login">
</form>

HTML5 comes with useful new types:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

You can see current browser compatibility of these types here.

Particularly in this post we want to discuss the new attributes, they allow us to validate data input on the fly, without the need of javascript.

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

 To validate non-empty fields, you simply put the required attribute:

<form action="" autocomplete="off">
    <label for="username">Username</label>
    <input id="username" name="username" required>
    <label for="password">Password</label>
    <input id="password" name="password" type="password" required>
    <input type="submit" class="btn" value="Login">
</form>

 Attributes url and email allows to validate for valid url and email addresses:

<form action="">
    <label for="username2">Username</label>
    <input id="username2" name="username" required>
    <label for="password2">Password</label>
    <input id="password2" name="password" type="password" required>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <label for="url">Homepage</label>
    <input id="url" name="url" type="url">
    <input type="submit" class="btn" value="Register">
</form>

 The pattern attribute is particularly useful, you can use regular expressions to validate custom types of data entry. The good old title attribute will allow us to specify a message:

<form action="">
    <label for="username2">Username</label>
    <input id="username2" name="username" 

     pattern="[a-zA-Z0-9]{5,}"  

     title="Minimum 5 letters or numbers." required>
    <label for="password2">Password</label>
    <input id="password2" name="password" type="password"  

     pattern=".{5,}" title="Minimum 5 letters or numbers." required>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required>
    <label for="url">Homepage</label>
    <input id="url" name="url" type="url">
    <input type="submit" class="btn" value="Register">
</form>

You can check current browser support at caniuse.com

As you can see, with html5 this and many other features will allow faster
coding and more rich web pages.

Reference:
http://w3schools.com/html5/html5_form_attributes.asp
http://css.dzone.com/articles/look-html5-form-validation