Larback - Retornando conhecimento

O dia de hoje foi realmente necessário?

Validação de formulários em HTML5

Validação de formulários e algo igualmente importante e chato de se fazer. Bom, pelo menos era. Agora com o HTML5 os atributos da tag input type, pattern e require nos fornecem recursos para fazer a validação sem utilizar código javascript.

Aposto que você estranhou a propriedade type, afinal ela sempre existiu. O lance é que o HTML5 trouxe novos tipos que já filtram os caracteres e formato desejado para entradas que antes seriam genericamente classificadas como text.
Por exemplo, se você desejar um campo que só aceite números pode validá-lo simplesmente apontando seu type como number. Ha ainda os atributos min e max que permitem que você configure a faixa de valores suportados.
 <form>
  Quantidade (entre 1 e 5):
  <input type="number" name="quantidade" min="1" max="5">
</form>
Você também pode usar datas para valores mínimos e máximos.
<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" />
A propriedade pattern especifica um formato (na forma de expressão regular do JavaScript) em que o valor do campo é testado. O propriedade required torna o campo de preenchimento obrigatório. Vamos pensar em um campo para entrada de CPF:
<form>
   CPF:
   <input type="text" name="cpf"
      pattern="\d{3}\.\d{3}\.\d{3}-\d{2}"
      title="Digite o CPF no formato nnn.nnn.nnn-nn">
   <input type="submit">
</form>
Além do number um outro valor para a propriedade type que vai encher os olhos dos desenvolvedores (principalmente os front-end) é o email
 <form>
  E-mail:
  <input type="email" name="email">
</form>
O valor tel <input type="tel"> é usado para campos que contém números de telefone, mas é suportado atualmente somente pelo Safari 8.
 <form>
  Telefone:
  <input type="tel" name="usrtel" required>
</form>
O valor url é usado para campos que contenham endereços de web sites (URLs). Em alguns celulares, a opção ".com" é apresentada no teclado para preencher este tipo de campo (aposto que você lembrou).
 <form>
  Homepage:
  <input type="url" name="homepage" required>
</form>


Bom é isso aí, se precisar de mais informações sobre o pattern leia: http://www.w3schools.com/tags/att_input_pattern.asp
Para uma lista completa das opções type do objeto input: http://www.w3schools.com/html/html_form_input_types.asp


Qualquer dúvida use os comentários abaixo (via facebook) ou o grupo novoid, também do facebook.