Missing image

Validação com CSS para inputs HTML5 – valid / invalid – cm base64

Achei um código muito bacana que mostra um joinha verde caso seu input seja válido ou um jóia para baixo vermelho caso seja inválido, utilizando os novos :invalid e :valid. E de quebra utilizando base64 para que vocês não precisem requisitar as imgs.

Para você converter algum arquivo em base64 basta abrir seu terminal e digitar base64 minha_imagem.png. Caso não queira fazer via terminal existem inúmeros sites onde você passa a url da sua imagem e ele faz a conversão. Mas cuidado ao usar em MOBILE pois os mesmos possuem uma lentidão na conversão do base64.

[code language=”css”]
input:required:invalid, input:focus:invalid {
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC’);
background-position: right top;
background-repeat: no-repeat;
-moz-box-shadow: none;
}
input:required:valid {
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=’);
background-position: right top;
background-repeat: no-repeat;
}
[/code]

link do gist: https://gist.github.com/1951641

Para quem ainda não conhece o base64, ele é uma representação do seu arquivo em Base64(http://pt.wikipedia.org/wiki/Base64) para que o mesmo não precise fazer a requisição da imagem, mas deve ser usado com cautela, pois o mesmo vai “aumentar” o tamanho da sua imagem em 33%. Entretanto se suas imagens estão vindo normalmente e seu navegador não carregou, irá aparecer um quadrado sem a imagem. O que não acontece com o base64 pois as imagens são criadas na hora da leitura do css.

Além do base64 também utilizamos as pseudo-classes: required, valid e invalid; que vieram com o HTML5.

Um exemplo interessante de validação é utilizar expressões regulares para aceitar apenas certos valores, como no exemplo abaixo:

[code language=”html”]
<input type="text" id="cep" name="cep" pattern="\d{8}" placeholder="Entre com os numeros do seu CEP" required />
[/code]

Mas com alguns tipos novos de input do HTML5 existem alguns que não precisam de regex para conferir se o valor está correto, por exemplo: number, email, url.

[code language=”html”]
<input type="email" id="email" name="email" placeholder="Digite um email valido" required />
<input type="number" id="idade" name="idade" required />
<input type="url" id="site" name="site" required />
[/code]

Caso possuam dúvidas deixem nos comentários.

Exemplos: http://jsfiddle.net/suissa/q6jX8/