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
<input type="text" required="required" name="text" pattern="[a-z\s]+$" />
Apenas números
<input type="text" required="required" name="numbers" pattern="[0-9]+$" />
Data
<input type="date" required="required" maxlength="10" name="date" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}$" min="2012-01-01" max="2014-02-18" />
Hora
<input type="time" required="required" maxlength="8" name="hour" pattern="[0-9]{2}:[0-9]{2} [0-9]{2}$" />
Campos genéricos de texto
<input type="text" required="required" name="name" />
Telefone
<input type="tel" required="required" maxlength="15" name="phone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" />
<input type="email" required="required" class="input-text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
Moeda
<input type="tel" required="required" maxlength="15" name="valor" pattern="([0-9]{1,3}\.)?[0-9]{1,3},[0-9]{2}$" />
Utilizei o type=”tel”, pq em celulares renderiza melhor o teclado.
Input file
<input type="file" name="file" accept="image/*" required="required" />
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
input:required:invalid {} input:required:valid {}
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:
::-webkit-validation-bubble {/*Insira aqui seu CSS.*/} ::-webkit-validation-bubble-message {} ::-webkit-validation-bubble-arrow {} ::-webkit-validation-bubble-arrow-clipper {}
Sobre o Autor