11

Estou fazendo um formulário de validação usando o HTML5 e suas próprias tags para validar os campos. Estou usando a PATTERN, que limita o tipo de caractere. Mas não funciona... Os campos não estão sendo bloqueados. "Codigo", apenas numeros e "Nome", apenas letras.

Código:

<!DOCTYPE html>

<form>
Codigo: <input type="text" required="required" name="number" pattern="[0-9]"></input>

Nome: <input type="text" required="required" name="text" pattern="[a-z]"></input> 
</form>

Como resolver isso?

4
  • 1
    Acredito que vai te ajudar: wbruno.com.br/html/validando-formularios-apenas-com-html5 Commented 6/03/2015 às 17:14
  • 2
    Na verdade ela funciona, o atributo pattern não evita que o usuário digite valores que não estão na expressão regular e sim evita que esses valores sejam enviados pelo formulário. Documentação: developer.mozilla.org/en/docs/Web/HTML/Element/Input Commented 6/03/2015 às 17:28
  • Adicionalmente, caso você queira impedir o usuário de digitar valores não aceitados você pode fazer isso facilmente utilizando o plugin jQuery Mask (igorescobar.github.io/jQuery-Mask-Plugin). Commented 6/03/2015 às 17:46
  • Na verdade, assim que eu terminei este post comecei a perceber isso... Que são apenas para expressões regulares e não há bloqueio dos campos, que é o que quero. Rodrigo, obrigado pelos links, irão ajudar muito! Obrigado a todos por confirmarem o que estava achando.
    – GtGtGt
    Commented 7/03/2015 às 0:55

1 Resposta 1

8

A validação não bloqueia os campos, apenas marca seu estado como inválido. Se você alterar o estilo do campo inválido, isso ficará visível:

input:invalid {
    background: red;
    color: #fff;
}
<form>
Codigo: <input type="text" required="required" name="number" pattern="[0-9]">
Nome: <input type="text" required="required" name="text" pattern="[a-z]">
</form>

Repare que as regras que você colocou são para 1 número no primeiro campo, e 1 letra (minúscula) no segundo. Se quiser validar múltiplos números e letras precisaria alterar as expressões regulares para [0-9]+ e [a-z]+.

2
  • 4
    Vale citar que o atributo pattern trabalha com expressões regulares. Commented 6/03/2015 às 17:30
  • 1
    Fiz uma edição breve para incluir o termo
    – bfavaretto
    Commented 6/03/2015 às 17:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .