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:
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
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter