Usando CSS para validar visualmente campos del formulario

Con HTML5 podemos utilizar el atributo required para indicarle al navegador que este campo es requerido; en base a esto, podemos aprovecharnos de la presencia de dicho atributo en el elemento y hacer las validaciones más amigables para el usuario final con ayuda de CSS; veamos unos ejemplos.

Ejemplo 1: Validación visual de campos del formulario con CSS

<form>
  <input required />
  <input type="submit" />
</form>

Si el campo esta vacio e intentamos enviar el formulario; el navegador cancelara el envío del mismo y mostrará el siguiente mensaje:

intenta enviar el formulario vacío escrito y verás el mensaje.

Ahora bien; si queremos personalizar los campos del formulario que poseen el atributo required (mostrarle un borde de color amarillo -advertencia- por ejemplo); podríamos utilizar una regla en CSS como esta:

/*Mostraremos los campos requeridos de color amarillo*/ form input:required { border:2px solid yellow; /* otras propiedades */ }

Ejemplo 2: Validación visual de campos del formulario con CSS

Podemos usar pseudo-class para hacer cosas realmente interesantes; por ejemplo podemos asignarle un color al input que el usuario está editando en un instante dado; rojo si el valor que esta colocando no es válido y verde si el valor que esta colocando el usuario es valido; para eso necesitamos la siguiente regla en CSS:

/*Si el valor que el usuario escribe es valido, obtendra un color verde*/
form input[type="email"]:required:valid{
 border:2px solid green;
 /* otras propiedades */
}
/*caso contrario, el color sera rojo*/
form input[type="email"]:focus:required:invalid{
 border:2px solid red;
 /* otras propiedades */
}

Y usaremos el siguiente formulario:

<form>
  <input required  type="email" />
  <input type="submit" />
</form>

Utilizamos la pseudo-class focus precediendo a la pseudo-class invalid porque cuando la página es cargada el campo por defecto se encuentra vacío; y por lo tanto tiene el estado invalid por defecto. Al aplicarle el estilo anterior al siguiente formulario.

Ejemplo 3: Validación visual de campos del formulario con CSS

Por último; un ejemplo un poco mas completo el cual solicitará información personal:

/*Mostraremos los campos requeridos de color amarillo*/
    form input:required {
       border:2px solid yellow;
    /* otras propiedades */
    }
    /*Si el valor que el usuario escribe es valido, obtendra un color verde*/
    form input:valid{
        border:2px solid green;
        /* otras propiedades */
    }
    /*caso contrario, el color sera rojo*/
    form input:focus:invalid{
        border:2px solid red;
        /* otras propiedades */
    }

Y usaremos el siguiente formulario:

<form>
    <input required type="text" name="nombre" placeholder="Primer nombre"/>
	<input type="text" name="nombre2" placeholder="Segundo nombre"/>
	<input required type="email" name="email" placeholder="Su correo electronico"/>
	<input required type="tel" name="tel" placeholder="Su teléfono"/>
	<input type="url" name="url" placeholder="Su pagina web" />
</form>

Como podemos apreciar hay campos que son obligatorios (primer nombre - email - teléfono) y otros que no son obligatorios (segundo nombre - página web) los primeros (los campos obligatorios) tendrán un borde de color amarillo y tendrán el mismo comportamiento que el formulario del ejemplo 2

Enviar