DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
19-08-2013

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 */
}

Y obtendremos:

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 obtenemos:

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Sistema sola con CSS

Sistema sola con CSS

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Css3 Spinners

Css3 Spinners

Algunos artículos que te pueden interesar

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Cómo crear nuestro propio botón tipo hamburguesa animado con CSS y un par de divs

Se explica cómo crear un botones de tipo hamburguesa animado con CSS, HTML y una simple función de JavaScript, los botones se convierten una vez clickeados en flechas y/o X según sea el caso.

Andrés Cruz 09-08-2017

Filtros en CSS3

Filtros en CSS3

Los filtros nos permiten aplicar una gran variedad de efectos como los de Photoshop o Gimp al contenido HMTL utilizando simplemente una sola línea de CSS.

Andrés Cruz 07-07-2013

Efectos con hover y transition en CSS (parte 2) -Filtros-

Efectos con hover y transition en CSS (parte 2) -Filtros-

En esta entrada veremos cómo emplear los Filtros en CSS en conjunto con las transiciones sobre imágenes permiten crear efectos muy llamativos para los filtros soportados.

Andrés Cruz 02-07-2015