Tips CSS3 – Pseudo clase Required, Valid, Invalid, Optional

Como muchos saben, una de las novedades presentes en HTML5 es el soporte de validación de controles de formulario sin la necesidad de JavaScript.

De esta forma, cuando se envía la información contenida en el formulario, el navegador valida los campos y retorna un error si se encuentra alguna incongruencia en la información introducida, todo esto sucede de forma automática.

Estas funciones de validación se activan cuando se define el atributo required en los controles del formulario.

En CSS3 contamos con unas pseudo clases asociadas a los controles de formulario, que nos van a permitir definir el estilo que tendrán los controles en lo que a la validación refiere.

Pseudo clase Required

Esta pseudo clase nos permite definir el estilo para el control de formulario cuando es obligatorio ingresar un dato.

[required]{

  border-color: green;

  box-shadow: 0px 0px 5px green;

}

Pseudo clase Valid

Con esta pseudo clase definimos el estilo del control cuando su contenido es valido, en realidad no es muy usado pero no esta de mas saber sobre su uso.

:valid{

  border-color: blue;

}

Pseudo clase Invalid

Usaremos esta pseudo clase para definir el estilo del control cuando los datos que se han introducidos son inválidos.

:invalid{

  border-color: red;

  box-shadow: 0px 0px 5px red;

}

Pseudo clase Optional

A diferencia del las anteriores, esta pseudo clase se aplica a los elementos input cuando el atributo required no ha sido definido, es decir cuando los controles no son obligatorios. Al igual que la pseudo clase Valid, no es muy usado pero no esta de mas saber como usarlo.

:optional{

  border-color: yellow;

}