Hasta ahora, cuando teníamos que validar un formulario lo hacíamos mediante JavaScript, revisando que se cumplieran ciertas condiciones y en caso positivo procesando el formulario o en caso negativo lanzando un error.
Con la llegada de HTML5 la validación de formularios se simplifica bastante, no teniendo que hacer uso en muchos casos de JavaScript, gracias a nuevos atributos que se añaden a las etiquetas de los formularios en HTML5.
Veamos algunos de estos atributos de validación de formularios en HTML5 y cómo manejarlos:
required
<input email="email" required >
Con el parámetro required en la etiqueta <input> hacemos que este campo sea obligatorio, y no enviará el formulario hasta no ser completado éste.
pattern
<input name="telefono" pattern="(+[0-9]{2}) [0-9]{9}}" >
Con pattern podemos establecer un patrón, que debe cumplirse en el campo introducido. En el ejemplo, el patrón indica que el campo telefono debe estar compuesto por 2 cifras iniciales (el prefijo) seguidas de un espacio y 9 cifras (el número), osea algo como «12 123456789». En caso de no cumplirse el patrón, el formulario no será enviado.
maxlength
<textarea name="mensaje" maxlength="100"></textarea>
Con maxlength controlamos la longitud máxima del campo. En el ejemplo, el campo mensaje no puede tener más de 100 caracteres.
Estas características de HTML5 no hacen innecesario el uso de JavaScript, que sigue siendo complementario, y de hecho también se están proponiendo métodos para interactuar con JavaScript.
Por otro lado, CSS también interactúa de forma sencilla con los formularios en HTML5, por ejemplo, mediante el pseudoselector « :invalid » podemos definir un estilo personalizado para los elementos del formulario no válidos:
:invalid {
border: 1px red solid;
}