Ayuda al usuario a rellenar formularios con CSS

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.
css1

Si añadimos la propiedad type=”” en el formulario, el navegdor detectará que pedimos un campo de email y validará que esté correctamente escrito:
css2


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

  • requiredCanIuse 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.

Daniel Martínez

5 comentarios - ¿Quieres opinar?
  1. Gracias, muy util el articulo, aporta bastante a todo lo q voy aprendiendo de CSS3. Saludos y exitos

  2. la verdad quiero validar un formulario con los campos apellidos,nombres,lugar.fecha,direccion residencia,municipio,barrio,telefono,celular,email,EPS,RH,nivel sisben,numero sisben,el formulario esta todo hecho solo que no me funciona la validacion,como lo podria hacer un consejo o una explicacion por favor.

  3. George Zambrano

    Hola Daniel, esta parte del código no me termina de funcionar,

    input[type=”email”] {
    padding:.5em;

    &;:required {
    border:1px red solid;
    }
    &;:hover:required {
    background-color:orange;
    }
    }

    O es que acaso para usar el Ampersand (&) debo añadir el less.js?.
    No sé que es LESS pero buscando en internet concluí en la pregunta que estoy haciendo.

    Gracias.

  4. Eres un crack.
    Muchas gracias!

Opiniones y preguntas:

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *