¿Existen propiedades de JavaScript relacionadas con la validación del formulario del navegador web en HTML5?

Question

En HTML5, la validación del lado del cliente debe convertirse en un trabajo del navegador web, mediante atributos como pattern o required.

¿Existe solo una implementación de CSS de esto (es decir, los selectores :valid y :invalid, para proporcionar comentarios al usuario) o también hay una implementación de JavaScript?

Estoy pensando en algo así como una función que permite llamar a una función de JavaScript si el usuario hace clic en enviar y el formulario tiene valores no válidos. O una bandera a la que puedo acceder en el objeto de formulario para mostrar si tiene errores o no.

Gracias.

Answer 1

Sí, hay un atributo validity que puede consultar. Ver http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#dom-cva-validity

No tengo idea de cuánto soporte existe en los navegadores actualmente.

Answer 2

Sí, funciona, y actualmente funciona. Ver A List Apart's excelente artículo sobre el tema por Ryan Seddon. Según el artículo, Chrome 4+, Safari 5+ y Opera 9.6+ admiten todas las propiedades. (También incluye an example.)

Citando el artículo, puede hacer cosas como:

input:focus:required:invalid { 
    background: pink url(ico_validation.png) 379px 3px no-repeat; 
} 
input:required:valid { 
    background-color: #fff; 
    background-position: 379px -61px; 
} 

Y cuando una entrada valida, se mostrará un icono, y cuando se invalida y se concentró, se mostrará otro.