Utilizando HTML5 para validação de formulários

0

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

  1. <input type=“text” required=“required” name=“text” pattern=“[a-z\s]+$” />

Apenas números

  1. <input type=“text” required=“required” name=“numbers” pattern=“[0-9]+$” />

Data

  1. <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

  1. <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

  1. <input type=“text” required=“required” name=“name” />

Telefone

  1. <input type=“tel” required=“required” maxlength=“15” name=“phone” pattern=“\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$” />

Email

  1. <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! 😀

 

Compartilhe.