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 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. 6/03/2015 às 17:30
  • 1
    Fiz uma edição breve para incluir o termo
    – bfavaretto
    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 .