+ - Recursos
- + -
Artigos
- + -
~ Um guia para validação de formulários não intrusiva
- Chris Campbell
- 2005
- + -
Mostra 3 abordagens de codificação não intrusiva
- Campos ocultos
- Classes múltiplas
- Atributos customizados e DTD
- + -
~ Validador de formulário simples do Elcio
Elcio Ferreira
2007
Validador que utiliza abordagem não intrusiva
Cada classe marca uma validação diferente
Ótimo para servir de ponto de partida para a construção de seu validador
- + -
~ JavaScript: máscara em campos de formulário simples e crossbrowser
Elcio Ferreira
2008
Ótimo artigo que deixa claras as desvantagens de se usar máscaras de campo
- + - ~ Validação de Formulários em PHP e JavaScript
- + -
~ Como indicar um campo opcional e um campo obrigatório
- Thomas Watson Steen
- 2006
- Discussão prática sobre o melhor local de colocar o asterisco
- + -
Conclusões do autor
- Use um * com cor diferente
- Evitar o vermelho
- Usar fieldsets para agrupar os campos
- Nunca usar negrito
- Não coloque o * à direita do campo
- + -
~ JavaScript - Detecting keystrokes
- PPK
- 2008
- Explicação clara e completa sobre como detectar cada tecla
- + -
~ W3C DOM - Form Error Messages
- PPK
- 2006
- Abordagem não intrusiva
- Evita o uso de alerts
- + -
~ Example - A JavaScript enhanced form
- Christian Heilmann
- 2005
- Utiliza a abordagem do campo oculto para armazenar informações sobre os campos
- + -
~ Um guia para validação de formulários não intrusiva
- + -
Lista de Links
- ~ Web Design References: Forms
- + -
~ Form Elements: 40+ CSS/JS Styling and Functionality Techniques
- 2008
- Conjunto bem atualizado de links para bibliotecas para formulários
- + -
Tabelas
- + -
~ Events - keydown, keypress, keyup
- PPK
- 2008
- Explicação bastante atualizada sobre a diferença entre os eventos de teclado
- + -
~ Events - keydown, keypress, keyup
- + -
Livro
- + -
~ Web Form Design: Filling the Blanks
- Luke Wroblewski
- 2008
- Livro exclusivo sobre projeto de formulários
- Nada de programação, mas excelentes dicas de usabilidade
- + -
~ Web Form Design: Filling the Blanks
- + - Bibliotecas Sugeridas
+ - Eventos JavaScript
- + -
Pressionamento de Tecla
- ~ Cuidado! Cada navegador tem um comportamento diferente
- ~ Página de Teste
- + -
onkeydown
- Dispara quando o usuário pressiona uma tecla
- Repete enquanto o usuário mantém a tecla pressionada
- + - Documentação
- + - Exemplos
- + -
onkeypress
- Dispara quando o usário pressiona uma tecla
- Chamado imediatamente antes da exibição da tecla
- Repete enquanto o usuário mantém a tecla pressionada
- Chamado depois do onkeydown
- Para cancelar o evento retorne falso
- + - Documentação
- + - Exemplos
- + -
onkeyup
- Dispara quando a tecla é liberada
- + - Documentação
- + - Exemplos
- + -
Mudança de valor de campo
- + -
onchange
- Dispara quando o valor de um campo muda
- Chamado quando o elemento perde o foco e o valor foi modificado
- Usado em caixas de seleção
- + - Documentação
- + - Exemplos
- + -
onchange
- + -
Submissão de Formulário
- + -
onsubmit
- + -
Dispara quando a submissão de uma formulário é chamada
- Clique no botão de submit
- Tecla ENTER no último campo
- + - Documentação
- + - Exemplos
- + -
Dispara quando a submissão de uma formulário é chamada
- + -
onsubmit
- + -
Mudança de foco
- + -
onblur
- Dispara quando um elemento perde o foco
- + - Documentação
- + - Exemplos
- + -
onfocus
- Dispara quando um elemento recebe o foco
- + - Documentação
- + - Exemplos
- + -
onblur
O que é validação de formulários
-
Verificação se um campo é válido em relação a uma regra
+ - Quais são os tipos de validação
- + -
Valor do Caractere
- + -
Número de Caracteres
- Máximo
- Mínimo
- + -
Caractere Digitado
- Letras
- Números
- Letras e Números
- Caracteres Especiais
- Letras, Números e Caracteres Especiais
- + -
Número de Caracteres
- + -
Valor do Campo
- + -
Obrigatoriedade
- + -
Requerido
- + -
~
Geralmente Indicado pelo *
-
Antes do preenchimento do campo
Após o preenchimento do campo
+ - Exemplos
-
- + -
~
- + -
Opcional
- Raramente é indicado
- + -
Requerido
- + -
Tipo de Dado
- + -
String
- Cadeia de Caracteres
- + -
Tempo
- Dependente da Cultura
- + -
Data
- + -
Formato Específico
- Dia/Mês/Ano
- Mês/Dia/Ano
- Dia-Mês-Ano
- Ano-Mês-Dia
- + -
Datas Escritas
- Hoje
- Amanhã
- Próxima Terça
- Antes de Ontem
- + -
Formato Específico
- + -
Hora
- Hora:Minuto
- Hora
- Meio dia
- Data e Hora
- + -
Repetições
- Todo dia
- A cada terça-feira
- Todo dia 30
- + -
Atualidade
- Data Passada
- Data Atual
- Data Futura
- + -
Conjuntos
- + -
Numéricos
- Números Inteiros
- + -
Números Reais
- Dinheiro
- Números Positivos
- Números Negativos
- Intervalos Numéricos
- + -
Fixos
- Lista de Estados
- Lista de Cidades
- Lista de Profissões
- + -
Numéricos
- + -
Específicos
- + -
Informações de Contato
- Muda com o tempo
- + -
Telefone
- Fixo
- Celular
- CEP
- Site na Web
- Orkut
- MSN
- ...
- + -
Informações Pessoais
- Raramente muda
- Dependente da Cultura
- CPF
- RG
- Título de Eleitor
- + -
Senha
- + - Verificação de força de senha
- Login
- Outros
- + -
Informações de Contato
- + -
String
- + -
Obrigatoriedade
- + -
Valor de mais de um campo
- + -
Comparação de dois ou mais campos
- Senha e Confirmação da Senha
- Data de Nascimento e Data de Óbito
- Habilitar um campo a partir do valor de outro
- Dividir datas em mais de um campo
- + -
Comparação de dois ou mais campos
Onde deve ser feita
- + -
Cliente
- JavaScript
- + -
Servidor
- PHP
- ASP.NET
- Java
- etc.
- Servidor E Cliente
Quando deve ser feita
- + -
Na submissão do item
- + -
~ Evento JavaScript
- onsubmit
- + -
Só é ruim quando há muitos itens a serem validados
- Neste caso, separe em passos
- + -
~ Evento JavaScript
- + -
Enquanto o usuário digita
- ~ Página de Teste
- onkeypress
- onkeydown
- onkeyup
Utilização de máscaras
Restringir o que o usuário digita
+ - ~ Opção ruim
- Cada navegador implementa os eventos de maneira diferente
- + -
Pense no futuro
- Novos navegadores
- Navegadores móveis
- + -
Após a mudança de foco
- + -
~ Evento JavaScript
- onfocus
- onblur
- + -
~ Evento JavaScript
- + -
Quando muda o valor do campo
- + -
~ Evento JavaScript
- onchange
- + -
~ Evento JavaScript
Como deve ser feita
- + -
Evite alerts
- Interrompem o processo de pensamento do usuário
- Impedem a navegação por abas
- São feios
- Coloque as mensagens de erro ao lado dos campos
- Separe formulários muito grandes em passos
- Evite máscaras de campo
- + -
Implemente de maneira não-intrusiva
- + -
Ruim
- <input type="text" onkeypress="return validarCampo()">
- + -
Bom
-
<script type="text/javascript">
function validarCampo()
{
...
}
document.getElementById("x").onkeypress=validarCampo;
</script>
...
<input type="text" id="x">
-
- + -
Melhor
-
<script type="text/javascript">
function validarCampo()
{
...
}
var xs = getElementsByClassName("x");
for(var i=0;i<xs.length;i++)
xs[i].onkeypress=validarCampo;
</script>
...
<input type="text" class="x">
Marque os elementos com diferentes classes de validação
+ - Use as funções
- ~ getElementsByClassName
- + -
~ Adicionar, remover ou obter as classes
- addClass
- removeClass
- hasClass
-
- ~ Exemplo
- + -
Ruim
- + -
Ajude o usuário a se focar no que está fazendo
- + - ~ Context Highlighting
- + - Textbox watermark
- + -
Ajude o usuário que repete sempre a mesma tarefa
- ~ Tabulação automática
- Tabulação através das setas
- + - ~ Autosugestão
