Com o HTML 5 se tornando cada vez mais poderoso, podemos utilizá-lo para uma função importante na maioria dos sites: Formulários. 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 ou popularmente conhecido como REGEX, é possível fazer uma validação simples sem escrever nenhuma linha de javascript. Com o uso de patterns e types podemos validar muita coisa em nossos formulários, veja alguns exemplos:
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 obrigatórios
- <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}$” />
Utilize Placeholders
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
Personalizar as mensagens de erro
Encontrei este artigo bem completo e interessante: Validando formulários like a boss com HTML5. Onde é mostrado como validar as mensagens de erro com puro CSS, vale a pena dar uma lida também 🙂
Por hoje é só! Um abraço pessoal! 😀
