Validando formulários apenas com HTML 5

Validar formulários é chato, tedioso e trabalhoso. Felizmente alguém olhou isso e resolveu incluir dentro da especificação do html, alguns atributos e valores novos muito interessantes.

Se usarmos corretamente, e estudarmos Expressões Regulares, é possível fazer uma validação simples sem escrever nenhuma linha de javascript. Vou deixar abaixo alguns snippets da tag input, utilizando o type correto (veja aqui todos os types novos da html5) e um uso do atributo pattern para os qual eu escrevi algunms ERs.

 

Apenas letras

 

Apenas números

 

Data

 

Hora

 

Campos genéricos de texto

 

Telefone

 

Email

 

Moeda

Utilizei o type=”tel”, pq em celulares renderiza melhor o teclado.

 

Input file

 

placeholder

Lembre-se de usar o placeholder nos seus campos em que você precise “dar alguma dica” para o usuário de como ele deve preenchê-lo

 

Estilizar os inputs

Faça testes utilizando as pseudo classes

 

Personalizar as mensagens de erro

Encontrei este artigo bem completo e interessante: Validando formulários like a boss com HTML5. Onde é mostrado o atributo: required x-moz-errormessage=”Ops. Não esqueça de preencher este campo.”, logicamente exclusivo do Firefox.

E para webkit, o css:

 

Isso é tudo!

Em alguns inputs, mesmo com o type definido, eu forcei a validação no pattern, pois um pode ser implementado sem o outro pelos browsers, e existe um “bug” no type email, em que no Chrome ele aceita um email do tipo: email@a, sem obrigar que o cliente informe o domínio do site. (.com, .net…)

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *