Usando CSS para validar visualmente campos del formulario

19-08-2013 - Andrés Cruz

Usando CSS para validar visualmente campos del formulario In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

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:

Formulario 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 


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!