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

Loader espiral con CSS

Loader espiral con CSS

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Botón flotante

Botón flotante

Algunos artículos que te pueden interesar

Mostrando transiciones de imágenes como fondo con CSS

Mostrando transiciones de imágenes como fondo con CSS

En esta entrada se explicará una forma de mostrar transiciones suaves de imágenes en el fondo de una página HTML.

Andrés Cruz 07-05-2015

Scrolling horizontal con CSS

Scrolling horizontal con CSS

Andrés Cruz 06-12-2016

Seleccionar rangos de elementos con CSS

Seleccionar rangos de elementos con CSS

A veces puede hacerse necesario seleccionar un rango de datos mostrados y es de casi obligatorio demarcar esta región seleccionada lo cual puede hacerse con CSS.

Andrés Cruz 27-07-2015