Uso de CSS3 para validar visualmente campos en un 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

1. <form>
2.   <input required />
3.   <input type=«submit» />
4. </form>

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

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:

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

 

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:

1. /*Si el valor que el usuario escribe es valido, obtendra un color verde*/
2. form input[type=«email»]:required:valid{
3.  border:2px solid green;
4.  /* otras propiedades */
5. }
6. /*caso contrario, el color sera rojo*/
7. form input[type=«email»]:focus:required:invalid{
8.  border:2px solid red;
9.  /* otras propiedades */
10. }

Y usaremos el siguiente formulario:

1. <form>
2.   <input required  type=«email» />
3.   <input type=«submit» />
4. </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:

1. /*Mostraremos los campos requeridos de color amarillo*/
2.     form input:required {
3.        border:2px solid yellow;
4.     /* otras propiedades */
5.     }
6.     /*Si el valor que el usuario escribe es valido, obtendra un color verde*/
7.     form input:valid{
8.         border:2px solid green;
9.         /* otras propiedades */
10.     }
11.     /*caso contrario, el color sera rojo*/
12.     form input:focus:invalid{
13.         border:2px solid red;
14.         /* otras propiedades */
15.     }

Y usaremos el siguiente formulario:

1. <form>
2.     <input required type=«text» name=«nombre» placeholder=«Primer nombre»/>
3.     <input type=«text» name=«nombre2» placeholder=«Segundo nombre»/>
4.     <input required type=«email» name=«email» placeholder=«Su correo electronico»/>
5.     <input required type=«tel» name=«tel» placeholder=«Su teléfono»/>
6.     <input type=«url» name=«url» placeholder=«Su pagina web» />
7. </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

Comenta desde Facebook

No olvides dejar tus comentarios