How HTML5 validation works

La idea básica detrás de la validación HTML5 es que le diga al navegador cual campos desea validados pero que en realidad no realice la implementación tediosa usted mismo. Cuando defina en qué estado se encuentra su campo de entrada, también le pide al navegador que valide el campo del lado del cliente basado en el tipo de campo de entrada.

Lamentablemente, no todos los navegadores modernos entienden esta nueva forma de validar formularios, pero no se preocupe. Si está utilizando un valor de tipo que el navegador no reconoce, lo tratará como un campo de texto normal y no se ha hecho ningún daño. Eso significa que todos los siguientes elementos de entrada se tratan en la misma manera:

<form>
	<input type="text" /> <br />
	<input type="my-weird-value" /> <br />
	<input />  <br />
	<input type="submit" value="Submit now" />
</form>

And why is this useful information when we are talking about validation? Because some of the input types discussed will not be supported by all browsers but this should not hold you from implementing the new HTML5 validation tricks.

Example - the required attribute

Let’s say you have a regular text input field that cannot be left blank – then you use the attribute required. HTML5 allows you to shorten you markup when using the required attribute, so instead of writing it the long way:

<form>
	<input type="text" required="required" /><br />
	<input type="submit" value="Submit now" />
</form>

You can just write:

<form>
	<input type="text" required /><br />
	<input type="submit" value="Submit now" />
</form>

Using this required attribute the browser informs the user that she has to fill out this particular field before submitting the form. The required attribute do not take into consideration what kinds of data are typed into the input fields but you do have the opportunity to do this with some of the following input types. Now let's go have a look at them in the following chapters!