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
- <form>
- <input required />
- <input type=«submit» />
- </form>
Si el campo esta vacío e intentamos enviar el formulario; el navegador cancelara el envío del mismo y mostrará el siguiente mensaje:
Ahora bien; si queremos personalizar los campos del formulario que poseen el atributorequired (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 */
- }
y obtendremos.
Ejmplo 2
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 obtenemos:
Ejemplo 3
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