Uma das principais preocupações dos desenvolvedores (ou pelo menos deveria ser) é fornecer para o usuário do sistema um feedback rápido e de qualidade. Isso fica ainda mais evidente quando falamos de validação de dados que estão sendo digitados pelo usuário. Hoje vou dar uma dica que envolve alguns dos novos recursos do HTML5 e umas dicas de CSS3 que combinadas formam uma solução bastante satisfatória no que diz respeito à validação de formulários.

Vamos pensar num exemplo bem simples. Um formulário de cadastro de newsletter, onde o usuário precisa cadastrar seu nome e seu email, sendo que:

  • o nome precisa ter apenas letras e pelo menos 7 letras.
  • o email precisa ser válido.
  • e ambos são obrigatórios.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cadastro de newsletter</title>
    <link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>
    <form>
        <fieldset>

            <legend>Cadastro de Newsletter</legend>

            <section>
                <label for="name">Nome</label>
		        <input type="text" name="name">
            </section>

            <section>
		        <label for="email">Email</label>
                <input type="text" name="email">
            </section>

            <section>
                <input type="submit" value="enviar">
            </section>

        </fieldset>
    </form>
</body>
</html>

Para seguir estes requisitos teremos que alterar algumas linhas de código apenas. A primeira coisa que precisaremos fazer é adicionar o atributo “required” aos INPUTS. Isso fará com que o próprio browser obrigue o usuário a informar algum valor nas caixas de texto. Não é necessário definir nenhum valor, apenas adicionar este atributo. Dessa forma:

<input type="text" name="name" required>

Sei que isso parece estranho, principalmente para quem estava acostumado a validar seus códigos com XHML, porém o HTML5 é mais flexível e nos permite fazer como mostrado na linha de cima. Mas se você quiser manter a validação de XHTML você pode definir qualquer valor… não há problema algum nisso.

<input type="text" name="name" required="true">

ou

<input type="text" name="name" required="required">

Fazendo apenas isso, já temos a validação de campos obrigatórios pronta.

validacao-ie-required
Agora precisamos validar o formato de email. Para isso, nem precisaremos de nenhuma expressão regular, já que no HTML5 temos um INPUT específico para isso que já possui um comportamento padrão para lidar com este tipo de informação. Então tudo que precisamos fazer é alterar o type do INPUT para “email”. Ficando assim:

<input type="email" name="email" required>

Simples assim… e já temos a validação emails:

validacao-ie-email

Para finalizar esta etapa, precisaremos validar a regra que impede o usuário de informar um nome com menos de 7 letras. E para fazermos isso, vamos precisar de uma expressão regular e o atributo “pattern”.

<input type="text" name="name" pattern="[A-z ]{7,}" required>

A partir de agora toda validação está completa. Porém temos nosso primeiro problema… A mensagem de validação desse pattern não é clara e como ela é gerada pelo browser, não há como customizá-la.

validaca-ie-chrome

É aqui que começa nossa dica de CSS3.

Pseudo classes de validação

No html5, os inputs possuem novas pseudo classes que nos dizem se o valor informado obedece às regras que definimos para ele. Ou seja, temos uma referência no CSS para saber se o campo possui um valor válido ou inválido. Funciona dessa forma:

  • Quando um input não tem um valor válido ele recebe uma classe: “invalid”.
  • Caso possua um valor válido, ele recebe uma classe: “valid”.

Podemos usar essa informação para melhorar o feedback para o usuário. Vamos criar uma DIV com uma mensagem de validação para cada campo do nosso formulário imediatamente após cada um deles. Dessa forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cadastro de newsletter</title>
    <link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>
    <form>
        <fieldset>

            <legend>Cadastro de Newsletter</legend>

            <section>
                <label for="name">Nome</label>
		        <input type="text" name="name" pattern="[A-z ]{7,}" required>
                <div class="validation-message">
                    Use apenas letras no seu nome. É necessário que tenha pelo menos 7 letras.
                </div>
            </section>

            <section>
		        <label for="email">Email</label>
                <input type="email" name="email" required>
                <div class="validation-message">
                    Por favor, informe um email válido.
                </div>
            </section>

            <section>
                <input type="submit" value="enviar">
            </section>

        </fieldset>
    </form>
</body>
</html>

Usando as pseudo classes de validação de cada input, nós podemos associar os divs com as mensagem referente a cada um deles. O CSS para isso tem duas partes:

Mostrando no INPUT uma borda verde quando for válido e vermelho quando estiver inválido.

input:required  { border:solid 2px red; }
input:valid  { border:solid 2px green; }

Depois para associar este “status” com cada DIV, nós vamos usar o seletor “+”… este símbolo faz com que o estilo seja aplicado ao objeto que estiver “imediatamente após”, ou seja… seja um irmão na estrutura do DOM. Neste caso, todos os objetos dentro da SECTION são irmãos. E isso faz com que cada DIV possua seu próprio comportamento isolado dos demais.

input:invalid + .validation-message { display: inline; }
input:valid + .validation-message { display: none; }

Pronto! Como viram, é possível desenvolver uma boa interface com o usuário dando à ele feedbacks importantes e em tempo real sem grandes dificuldades. Nem mesmo chegamos a codificar nenhuma linha de javascript. Incrível né? Não se esqueçam de comentar…

Veja o exemplo rodando ou Baixe os arquivos