Olá galera, estou de volta para mostrar uma maneira fácil e prática de validar seus forms com jQuery, vamos direto ao Código e depois explicamos rapidamente...
Bom é bem simples, este é o código javascript que criei para validar meus fomulários.
Carrego este arquivo em todas as páginas que tiverem formulário através do código "<script src="validacao.js"></script>".
Cada formulário fica em pastas separadas porém todas as pastas contém além do formulário também este arquivo de validação, que basicamente só terá de diferente dos demais o nome dos campos dentro do "switch" e suas respectivas mensagens de validação.
Este script, busca todos os inputs, textarea, select, checkbox, etc da página, e os validam, mostrando um alert com uma mensagem específica para cada campo.
Para os elementos escondidos "hidden", ou para elementos desativados "disabled","readonly", basta por para eles id=":null", para serem ignorados pela validação.
Há também o código dos eventos para botões do form. Para chamar a validação basta inserir para o botão Gravar id="Gravar", podendo ser este até do tipo "submit", pois há a prevenção do evento padrão.
Se houver um botão fechar, este irá fechar a página, apenas informando o id="Fechar". Útil para formulários em janelas "modais".
Para janelas modais, também há o evento para fechar a janela na tecla Esc após confirmação.
Bom galera, espero que tenham gostado.
Até a próxima.
<script type="text/javascript"> $(function(){ // Valida os dados do formulario function Validacao(){ try { btnGravar(true); var msg=null, go=true; $(':input[type!=button][id!=":null"]').each(function(i,e){ var $e = $(e); if($e.attr('type')=='hidden'&&($e.attr('rel')!='hidden')) return; switch($e.attr('name')) { case 'nome': msg = 'Preencha o campo Nome!!!'; break; case 'telefone': msg = 'Preencha o campo Telefone!!!'; break; case 'endereco': msg = 'Preencha o campo Endereço!!!'; break; } if($.trim($e.val())== "") { alert(msg); if($e.attr('type')!='hidden') $e.focus(); btnGravar(false); go=false; return false; } }); if(go) { $('input[name=btnAcao]').val("gravar"); $('form:first').submit(); } } catch(e) { try{ console.log(e.message) } catch(e){} } } // Adiciona evento de validação no botão Gravar $('#Gravar').click(function(e){ e.preventDefault(); Validacao(); }); // Adiciona evento Fechar Tela no botão Fechar $('#Fechar').click(function(){ window.close(); }); // Altera foco para a primeira entrada de Texto não desativada $('input:not(:disabled):first').focus(); // Fecha Janela com click do Esc $(document).keydown(function(ev){ var e=ev||window.event, kp=e.keycode||e.which||null; if(kp==27) if(confirm('Deseja fechar a janela?')) window.close(); }); }); </script>
Bom é bem simples, este é o código javascript que criei para validar meus fomulários.
Carrego este arquivo em todas as páginas que tiverem formulário através do código "<script src="validacao.js"></script>".
Cada formulário fica em pastas separadas porém todas as pastas contém além do formulário também este arquivo de validação, que basicamente só terá de diferente dos demais o nome dos campos dentro do "switch" e suas respectivas mensagens de validação.
Este script, busca todos os inputs, textarea, select, checkbox, etc da página, e os validam, mostrando um alert com uma mensagem específica para cada campo.
Para os elementos escondidos "hidden", ou para elementos desativados "disabled","readonly", basta por para eles id=":null", para serem ignorados pela validação.
Há também o código dos eventos para botões do form. Para chamar a validação basta inserir para o botão Gravar id="Gravar", podendo ser este até do tipo "submit", pois há a prevenção do evento padrão.
Se houver um botão fechar, este irá fechar a página, apenas informando o id="Fechar". Útil para formulários em janelas "modais".
Para janelas modais, também há o evento para fechar a janela na tecla Esc após confirmação.
Bom galera, espero que tenham gostado.
Até a próxima.
Nenhum comentário:
Postar um comentário