Validar Forms em JavaScript

Imagemap
Validar Forms em JavaScriptRecursosArtigosUm guia para validação de formulários nã ...Chris Campbell2005Mostra 3 abordagens de codificação não i ...Campos ocultosClasses múltiplasAtributos customizados e DTDValidador de formulário simples do ElcioElcio Ferreira2007Validador que utiliza abordagem não intr ...Cada classe marca uma validação diferent ...Ótimo para servir de ponto de partida pa ...JavaScript: máscara em campos de formulá ...Elcio Ferreira2008Ótimo artigo que deixa claras as desvant ...Validação de Formulários em PHP e JavaSc ...Er Abbott2007Série de Artigos da Revista PHPFácil de implementarUtiliza o rótulo para determinar a regra ...Preocupa-se comServidorClienteUm pouco intrusivaLista de ArtigosParte 1Parte 2Parte 3Parte 4Parte 5Parte 6Como indicar um campo opcional e um camp ...Thomas Watson Steen2006Discussão prática sobre o melhor local d ...Conclusões do autorUse um * com cor diferente Evitar o vermelhoUsar fieldsets para agrupar os camposNunca usar negritoNão coloque o * à direita do campoJavaScript - Detecting keystrokesPPK2008Explicação clara e completa sobre como d ...W3C DOM - Form Error MessagesPPK2006Abordagem não intrusivaEvita o uso de alertsExample - A JavaScript enhanced formChristian Heilmann 2005Utiliza a abordagem do campo oculto para ...Lista de LinksWeb Design References: Forms Form Elements: 40+ CSS/JS Styling and F ...2008Conjunto bem atualizado de links para bi ...TabelasEvents - keydown, keypress, keyupPPK2008Explicação bastante atualizada sobre a d ...LivroWeb Form Design: Filling the BlanksLuke Wroblewski2008Livro exclusivo sobre projeto de formulá ...Nada de programação, mas excelentes dica ...Bibliotecas SugeridasfValidatorLiveValidationValidador do ElcioReally Easy Field ValidationwFormsEventos JavaScriptPressionamento de TeclaCuidado! Cada navegador tem um comportam ...Página de TesteonkeydownDispara quando o usuário pressiona uma t ...Repete enquanto o usuário mantém a tecla ...Documentaçãow3schoolsMicrosoftExemplosw3schoolsonkeypressDispara quando o usário pressiona uma te ...Chamado imediatamente antes da exibição  ...Repete enquanto o usuário mantém a tecla ...Chamado depois do onkeydownPara cancelar o evento retorne falsoDocumentaçãow3SchoolsMicrosoftExemplosw3schoolsonkeyupDispara quando a tecla é liberadaDocumentaçãow3schoolsMicrosoftExemplosw3schoolsMudança de valor de campoonchangeDispara quando o valor de um campo mudaChamado quando o elemento perde o foco e ...Usado em caixas de seleçãoDocumentaçãow3schoolsMicrosoftExemplosw3schoolsSubmissão de FormulárioonsubmitDispara quando a submissão de uma formul ...Clique no botão de submitTecla ENTER no último campoDocumentaçãow3schoolsMicrosoftExemplosw3schoolsMudança de focoonblurDispara quando um elemento perde o focoDocumentaçãow3schoolsMicrosoftExemplosw3schoolsonfocusDispara quando um elemento recebe o focoDocumentaçãow3schoolsMicrosoftExemplosw3schoolsO que é validação de formuláriosVerificação se um campo é válido em rela ...Quais são os tipos de validaçãoValor do CaractereNúmero de CaracteresMáximoMínimoCaractere DigitadoLetrasNúmerosLetras e NúmerosCaracteres EspeciaisLetras, Números e Caracteres EspeciaisValor do Campo ObrigatoriedadeRequeridoGeralmente Indicado pelo*Antes do preenchimento do campoApós o preenchimento do campoExemplosOpcionalRaramente é indicadoTipo de DadoStringCadeia de CaracteresTempoDependente da CulturaDataFormato EspecíficoDia/Mês/AnoMês/Dia/AnoDia-Mês-AnoAno-Mês-DiaDatas EscritasHojeAmanhãPróxima TerçaAntes de OntemHoraHora:MinutoHoraMeio diaData e HoraRepetiçõesTodo diaA cada terça-feiraTodo dia 30AtualidadeData PassadaData AtualData FuturaConjuntosNuméricosNúmeros InteirosNúmeros ReaisDinheiroNúmeros PositivosNúmeros NegativosIntervalos NuméricosFixosLista de EstadosLista de CidadesLista de ProfissõesEspecíficosInformações de ContatoMuda com o tempoTelefoneFixoCelularCEPEmailSite na WebOrkutMSN...Informações PessoaisRaramente mudaDependente da CulturaCPFRGTítulo de EleitorSenhaVerificação de força de senhaLoginOutrosValor de mais de um campoComparação de dois ou mais camposSenha e Confirmação da SenhaData de Nascimento e Data de ÓbitoHabilitar um campo a partir do valor de  ...Dividir datas em mais de um campoOnde deve ser feitaClienteJavaScriptServidorPHPASP.NETJavaetc.Servidor E ClienteQuando deve ser feitaNa submissão do itemEvento JavaScript onsubmitSó é ruim quando há muitos itens a serem ...Neste caso, separe em passosEnquanto o usuário digitaEventos JavaScriptPágina de TesteonkeypressonkeydownonkeyupUtilização de máscarasRestringir o que o usuário digitaOpção ruimCada navegador implementa os eventos de  ...Pense no futuroNovos navegadoresNavegadores móveisApós a mudança de focoEvento JavaScriptonfocusonblurQuando muda o valor do campoEvento JavaScriptonchangeComo deve ser feitaEvite alertsInterrompem o processo de pensamento do  ...Impedem a navegação por abasSão feiosColoque as mensagens de erro ao lado dos ...Separe formulários muito grandes em pass ...Evite máscaras de campoImplemente de maneira não-intrusivaRuim<input type="text" onkeypress="return va ...Bom<script type="text/javascript"> 

 funct ...Melhor<script type="text/javascript"> 

 funct ...Marque os elementos com diferentes class ...Use as funçõesgetElementsByClassNameAdicionar, remover ou obter as classesaddClassremoveClasshasClassExemploAjude o usuário a se focar no que está f ...Context HighlightingTextbox watermarkUse quando há pouco espaço para o formul ...Ajude o usuário que repete sempre a mesm ...Tabulação automáticaTabulação através das setasAutosugestão
hide

Validar Forms em JavaScript

hide
Recursos
hidehelp full-5

Como deve ser feita

hide
Implemente de maneira não-intrusiva
hideksmiletris ksmiletris
Melhor
hide
Use as funções
hide

function hasClass(ele,cls) {

return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));

}

function addClass(ele,cls) {

if (!this.hasClass(ele,cls)) ele.className += " "+cls;

}

function removeClass(ele,cls) {

if (hasClass(ele,cls)) {

var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');

ele.className=ele.className.replace(reg,' ');

}

}

//call the functions

//addClass(document.getElementById("test"), "test");

//removeClass(document.getElementById("test"), "test")

//if(hasClass(document.getElementById("test"), "test")){//do something};