Form Validation on the client side has always been a problem thatwas corrected with the use of Javascript, either with your own codeor third parties. This is because in the past it was unthinkable evenhave a solution with pure HTML, but with the arrival of the set of specifications and technologies that make up the current HTML5,now this is possible, but with the distinct disadvantage that it is not yet supported by most browsers and those who support them have their particular way of running, however it is important to bear in mind, since in the near future will be an invaluable utility.

The attribute «required»

By including the required attribute within an element <input>automatically becomes mandatory to be filled and a booleanattribute, only their presence is required no more.

code:

<input type="text" name="name" required><a href="http://www.articulame.com/wp-content/uploads/2012/03/1c-1333028384_full550.png"><img class="alignnone size-full wp-image-236" title="1c-1333028384_full550" src="http://www.articulame.com/wp-content/uploads/2012/03/1c-1333028384_full550.png" alt="" width="251" height="135" /></a>
At the time it encounters a validation error running the browser’s default action, you normally see a small balloon popup (tooltip) containing a warning text. Adding the title attribute on the label<input>, you can extend the information displayed.

 The attribute «pattern» and the types of <input> As mentioned above, required only need of any value in the element<input> to be valid, but using the pattern attribute together are ableto verify not only the presence of a value but this value must a format, a length or a specific data type. This is accomplished by defining a regular expression pattern. Code :

With the above pattern validates a valid email format(mail@example.com), but in practice this is somewhat absurd, because defining a type in the <input> email, the browser itself doesvalidation of the type in question

Code :

It’s the same with other types of <input>: search, url, telephone, email, password, date pickers, number, checkbox, radio and file. Therefore the pattern attribute potential lies in being more specific in the format type and length required. For example, suppose the user needs toenter a valid IPV4 address, do as follows:

Code :

The pseudo-class: invalid CSS3

Basically the pseudo class: invalid invalid represents any field that results from a validation (pun intended), the opposite occurs with its counterpart :: valid. This provides that if a field contains an invalid value to take a consistent appearance, thus helping the user toidentify areas that need to be verified.

Code :

One aspect that is important to note, is that by default all fields are valid – as expected – but if a field is required, then the opposite occurs, the default will be invalidated.
Code :

This is a great advantages over that brings HTML5, however form validation natively is still in an early stage of development, particularly with regard to how to notify the existence of an invalid field, since there are no labels CSS to customize the tooltip style, at least in case of Google Chrome.

Written by Jonathan Javier {Twitter: @ jonasanx}