Os elementos input do HTML 5 ganharam novos tipos, com validação e métodos de entrada mais úteis.

Novos valores para o atributo type

  • tel
  • search
  • email
  • url
  • datetime, date, month, week, time, datetime-local (GMT)
  • number
  • range
  • color

Atributos novos (step, min, max) definem os valores mínimos e máximos de cada campo, ou o intervalo entre cada possível valor. Ex: Um tipo time possui step (300), então os únicos horários permitidos são: 7:00, 7:05, 7:10 e assim sucessivamente.

Novos atributos para input

  • autofocus – quando a página é carregada, o foco já é colocado diretamente neste campo. Outras soluções javascript, atribuem o foco somente após o carregamento da página
  • placeholder – atribui um valor personalizado ao campo de texto, quando vazio
  • required – informa que o campo é obrigatório
  • maxlength – limita a quantidade de caracteres de um campo, agora o textarea também usufrui desta propriedade

Validação de formulários

A tarefa de validação de formulários com Javascript não é tão trivial, muitos plugins auxiliam nesta tarefa com marcações personalizadas. Os novo valores type permitem validações nativas de acordo com o campo, mas há outras formas de estender essas verificações e torná-las mais personalizadas.

  • pattern – permite definir expressões regulares de validação, sem a necessidade do Javascript. O campo telefone, não possui uma validação padrão, este atributo pode ser utilizado para garantir a correta formatação do dado.
  • novalidate – em determinadas situações não se deseja validar os campos de um formulário, então basta acrescentar o atributo no elemento <form>
  • formnovalidate – alguns botões podem executar funções distintas que não necessitem de validação, mas que são interpretadas como submit. Para viabilizar a operação, é necessário acrescentar o atributo no elemento do botão

Em alguns casos, o desenvolvedor necessitará de um código mais específico para validar o campo. É possível escrever funções javascript para auxiliar nesta tarefa.

Um novo evento chamado oninput é disparado quando o valor de algum campo é modificado. Este evento capturará qualquer modificação no valor do campo, feita com mouse, teclado ou outra interface qualquer.

O método setCustomValidity possui uma string como assinatura. Caso a string passada como parâmetro seja vazia, então o campo é válido, caso contrário, é apresentada uma mensagem de erro.