HTML5

Validaciones

Un mundo sin validaciones.

😖

Validaciones con HTML5

• Con el atributo pattern (las valida el navegador)

• Mediante el API de validaciones

• Mediante las pseudoclases de CSS3

<input type="email" id="correo" required pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />

Utilizando una expresión regular en el atributo 'pattern'

https://regex101.com/

Utilizando el API

de validaciones de Javascript

• valueMissing 
• typeMismatch
• patternMismatch
• tooLong
• rangeUnderflow 
• rangeOverflow
• stepMismatch
• valid 
• customError

var input = document.getElementById('IdOfField');
var validityState_object = input.validity;

document.querySelector( "input" )
.addEventListener( "invalid",
function( event ) {
      event.preventDefault();
     });

Previene el comportamiento 'default'

Propiedad 'validity'

Mediante Pseudoclases de CSS3

Pseudoclases disponibles

• :required

• :optional

• :invalid

• :valid

• :in-range

• :out-of-range