Antes de meternos de lleno con CSS quiero dejar algo claro:
Si algo puede fallar, va a fallar. Y si alguien tiene todas las papeletas para fallar es nuestro amigo CSS y por eso es importante que todo tipo de validación en CSS sea validada también en JavaScript.
Deja Vu:
Quiero dejar algo claro: Si algo puede fallar, va a fallar. Y si alguien tiene todas las papeletas para fallar es nuestro amigo JavaScript y por eso es importante que todo tipo de validación en JavaScript sea validada también en el server side.
CSS Como medio de validación VISUAL de formularios
Podemos validar un formulario añadiendo en el HTML “required” y el navegador nos dirá que el campo está vacío, que lo rellenemos.
Si añadimos la propiedad type=”" en el formulario, el navegdor detectará que pedimos un campo de email y validará que esté correctamente escrito:
<input type="email" required />
<input type="text" />
<input type="submit" />
Podemos capturar un elemento no validado por el navegador con el pseudoselector :invalid y podemos darle estilos teniendo en cuenta que cuando cargamos la página el formulario está vacío y por ende, es invalid. Para que nuestro pseudoselector :invalid entre en acción solo cuando el usuario interactúe con el formulario tenemos otro pseudoselector :focus
input[type="email"]:focus:invalid {
-webkit-appearance: none;
background-color:#fad0d0;
border: 1px solid #e85c5c;
outline: none;
box-shadow: 0 0 20px red;
}
Con eso le damos al usuario la sensación de que va a ir al infierno mientras no rellene bien su dirección de correo, funcional ¿verdad?. Ahora tenemos que ver como dar la sensación que es bueno y que ha rellenado el campo correctamente cuando lo haga y contamos con el selector adecuado: :valid (Obvio, huh?).
input[type="email"]:focus:valid {
-webkit-appearance: none;
background-color:#fad0d0;
border: 1px solid #e85c5c;
outline: none;
box-shadow: 0 0 20px red;
}
Y para los usuarios menos avanzados, podemos utilizar un pseudo selector para estilizar solo los campos requeridos: :required. Nos sirve para dar estilos a los elementos que tenemos marcados como “required” en nuestro HTML y así como los selectores vistos anteriormente, podemos dar estilos a un campo required cuando tiene un focus o un hover:
input[type="email"] {
padding:.5em;
&:required {
border:1px red solid;
}
&:hover:required {
background-color:orange;
}
}
Hay que tener cuidado con mezclar :required con :valid o :invalid, su target podría ser el mismo y como ya sabemos CSS es un markup de cascada, así que el último prevalecerá.
Hemos visto los siguientes elementos:
- required – CanIuse link: Lo usamos en el formulario para que el navegador detecte si está correctamente rellenado el campo, basado en su type=”". Recordad que hay varios tipos de Type para un input y que estos no solo ayudan al navegador a validar, sino que en dispositivos móviles pueden sacar un teclado acorde al tipo de campo para facilitar su uso. Lamentablemente required no le mola a safari, iOS opera mini o Android. Así que recordad lo primero que dije: las cosas pueden fallar y van a fallar, y si no fallan es que no has testeado lo suficiente. Haced Fallback en JS para validación.
- :invalid: Detecta cuando el contenido de un campo es invalido para el navegador, basado en el type=”" del campo.
- :valid: Detecta cuando el contenido de un campo es valido para el navegador, basado en el type=”" del campo.
- :required: Apunta a cualquier campo con la etiqueta “required” en el HTML
Id, usadlos y respaldad el CSS con JS, el JS con PHP y el PHP con velas a vuestro santo favorito.
La entrada Ayuda al usuario a rellenar formularios con CSS aparece primero en CoolVillage.
