Validação de Form com jQuery!!!


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...
<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