HTML5 form validation

Formularios

Formulario de prueba de validaciones Html5

Nuevas funciones/resticciones para validar formularios

HTML5 incorpora 8 formas de validar los valores introducidos por el usuario o por la aplicaición en los elementos de un formulario.
el objeto que permite acceder a las 8 restricciones es ValidityState al que puede accederse desde cualquier control/elemento de foormulario en un browser que implemente HTML5: 

									
var creditcardnumberCheck = document.myForm.creditcardnumber.validity;

la variable creditcardnumberCheck guarda la referencia al objeto ValidityState del input creditcardnumber. el objeto contiene referencias para acceder a las 8 restricciones de validación y al resultado de la suma de la 8 en conjunto.
ValidityState es un objeto dinámico y su contenido se actualiza con cada cambio del contenido de campo al que se refiere mientras nuestra variable conserve su referencia.
Para consultar el resultado de las 8 restricciones utilizamos 

									
creditcardnumberCheckvalid;
que devuleve true cuando las 8 restricciones son false, y viceversa.

las 8 restricciones que contiene ValidityState son:

valueMissing
true cuando value está vacío en un input con atributo required
typeMismatch
true cuando value contiene una cadena que no cumple las las expectativas del tipo de input declarado (number, email, url, etc.)
patternMismatch
code>true cuando value contiene una cadena que no cumple las restricciones del patrón que contiene pattern
tooLong
true cuando la longitud de la cadena de value excede el valor del atributo maxlength
rangeUnderflow
true cuando value es menor que min
rangOverflow
true cuando value es mayor que max
stepMismatch
true cuando value no coincide con un múltiplo de step
customError
Error customizable mediante script para casos no contemplados en la API, por ejemplo:
true cuando el input de confirmación de password no es igual que el input de password
Para utilizarlo hay que llamra a la función setCustomValidity(message) para que el eleemento de formulario esté dentro del objeto customError. Ejemplo: 
									
passwordConfimationField.setCustomValidity("La contraseña  no coincide");
donde passwordConfimationField es la referencia al input de confimación de contraseña del ejemplo citado más arriba.

Atributos y funciones de validación

Atributo willValidate
Función checkValidity
hace una simulación de la validación de un formulario sin necesidad de hacer el submit del mismo.
No sólo realiza la validación, sino que, addemás, dispara todos los eventos y triggers del UI resultantes de la misma, exactamente igual que si se hubiera realizado un submit.
Atributo vaidationMessage
en teoría, todavía no lo soporta ningún browser.
Desactivar la validación
									
ejemplo