Já expliquei em posts anteriores como usar o validade e como usar o Ajax Form. Agora irei mostrar como os dois em conjunto oferece uma solução completa para controle de formulários, validação cliente, remota e envio de dados por Ajax de uma forma simples, intuitiva, de fácil manutenção e para qualquer situação.

As validações que serão feitas serão as seguintes:

  • Nome: é obrigatório e não poderá existir nomes duplicados (exemplo de validação remota)
  • Idade: é necessário que seja número e não poderá ser maior que 18 (criação de um novo método de validação), já demonstrado anteriormente
  • E-mail: precisa ser um e-mail válido
  • País: precisa escolher ao menos uma opção

O código da marcação HTML é bem direto:

[jsfiddle url=”http://jsfiddle.net/TZw6x/” include=”html,result”]

Depois de ter inserido o jQuery, Validate e Form Plugin no cabeçalho, podemos usá-lo para validar o formulário de acordo com as regras estabelecidas. Irei demonstrar o código e depois explicar cada item:

[jsfiddle url=”http://jsfiddle.net/TZw6x/” include=”js”]

A diferença deste código em relação ao post anterior sobre o validate é o fato de agora existir uma validação remota. Observe a nova regra ‘remote’, em que podemos passar uma  url que será passado o valor daquele campo (por padrão como get), então ele irá esperar uma resposta no formato JSON com simplesmente um valor true ou false. Neste caso, como no código abaixo ele verifica se já existe um nome ‘alexandremagno’:

[jsfiddle url=”http://jsfiddle.net/TZw6x/” include=”html”]

Vale lembrar que este não é um código utilizado na prática, pois é simplesmente como demonstração. No server-side, devemos verificar nomes duplicados de acordo com o banco de dados, então provavelmente seria um select verificando se já existe este nome no banco de dados. O exemplo simples ilustra a situação. Com o este método, poderemos unificar no validate para toda resposta sobre validação, mesmo que seja remota. Não haverá mais desta forma diferenciação entre validação cliente/servidor. Apesar disto, a verificação no  back-end deve ser feita (para usuários que não tenha javascript habilitado ou que desabilitem o javascript).

O método submitHandler do Validate

Este método é onde os dois plugins se encontram. Com este método podemos controlar o que irá acontecer no envio do formulário. Quando não é utilizada, ela irá enviar o formulário normalmente. Após utilizá-la, podemos passar o formulário como parâmetro e usá-lo para por exemplo, impedir que o formulário seja enviado e assim podermos utilizar um envio por ajax ou qualquer lógica dependendo da situação. Neste caso nós o utilizamos para chamar o Ajax Form:

[jsfiddle url=”http://jsfiddle.net/TZw6x/” include=”result,js”]

No sucesso, passamos uma função chamada response que irá enviar os dados e retornar a mensagem de sucesso que será inserida no DOM.

A função response aceita o parâmetro data que é o retorno da requisição feita por ajax. Vale lembrar que este uso pode ser totalmente não-obstrusivo, pois várias frameworks já possuem métodos em suas classes para identificar a natureza da requisição e retornar o tipo de dado adequado. Neste caso o retorno é uma parte de HTML que pode ser usado para ser inserido no DOM.

Primeiramente usamos um método do Form Plugin que limpa todos os dados do formulário, depois remove qualquer div com o id mensagem para evitar que seja inserida novamente. Logo depois os dados vindos da requisição são inseridos com um efeito fade logo após o título. Tive que utilizar o método hide do jQuery antes, pois o efeito fade pode é percebido em um elemento que esteja inicialmente escondido.

Desta forma, o controle de formulário fica totalmente na responsabilidade desses dois plugins integrados. Para formulários maiores e lógicas mais complexa podemos seguir o mesmo raciocínio sem maiores problemas.

50 Replies to “Formulários é com o Ajax Form e o Validate”

  1. Ola Alexandre.

    Li reli tentei me matei e ainda não consegui. A validação acontece normalmente porém o evento submit não ocorre.

    Meu codigo:

    Descrição:
    ” id=”descricao” title=”Descrição do Nível” />

    ” />

    /*** Ajax ***/
    $(‘#frmNivel’).validate({
    submitHandler: function(form) {
    $(form).ajaxForm({
    dataType: ‘json’,
    success: resposta,
    url: ‘cadastra_nivel.php’
    });
    },
    rules: {
    descricao: { required: true }
    },
    messages: {
    descricao: “Preencha com uma descrição”
    }
    });

  2. Acontece que o ‘dataType’ quando colocado ‘json’ nada acontece. Agora seguindo seu exemplo e colocando ‘post’ (que ainda nao descobri porque desse parametro) ai ele funciona mas meu retorno eh diferente e precisaria ser json

  3. Muito bom esse exemplo.

    Só estou com uma dificuldade. Estou usando este exemplo em um form de contato, esta validando e enviando blz, só não consegui entender como enviar a mensagem de sucesso?

    Abraços

  4. @Ricardo: A mensagem de sucesso pode ser manipulada da forma como desejar. Se o retorno do servidor vir sucesso da mesma forma que você manipula para a mensagem. Você pode trazer a resposta diretamente do server ou escrever a string via javascript. Existem várias possibilidade, o importante é você saber como está acontecendo para fazer da forma mais apropriada com a situação. Espero ter ajudado, abraços e boa sorte…

  5. O problema é que não manjo muito disso, somente estou querendo usar no meu site.

    No seu exemplo de onde e como vem a resposta? pq não consegui localizar.

    Abraços

  6. @Ricardo: A resposta vem do arquivo enviar_dados.php em que o código está no post no código php. Fiz uma modificação para que você entendesse melhor, por que o objetivo do post aqui é para ensinar e ter uma visão geral, não simplesmente copiar e colar. Espero ter ajudado. Abraços e boa sorte.

  7. Salve galera.. eis uma dica, para aqueles que tiveram problemas com acentuação usando o AjaxForm. Resolvi da seguinte forma:
    Nas páginas utilizo o charset iso-8859-1, e para gravar CORRETAMENTE no banco de dados, a função utf8_decode().

  8. Boa tarde Alexandre Magno, muito bom mesmo, só estou com uma dúvida quanto a forma do select no remote.php, eu uso mysql estou usando o script para cadastro como posso estar fazendo para que o meu select veja todos os registro no banco de dados e mostre se é true ou false somente uma vez, já tentei de tudo mais não esta dando certo.

    Deis de já muito obrigado esse post esta sendo de grande ajuda para mim.

  9. Parabens pelo conteudo! Eu estou com a mesma duvida do Ricardo… Nao consegui entender como faco para manipular minhas mensagens de sucesso (ou erro) – Meu arquivo sni-edit.php realiza a operacao corretamente no bd como faco o retorno? Ta assim:
    $(form).ajax.submit({
    dataType: ‘html’,
    sucess: resposta}); …
    So nao sei manipular a funcao resposta … e para mensagens de erro? Caso algo nao funcione no bd?

    })

  10. @Adriana: A função resposta você tem como parâmetro o dado retornado pelo php no seu caso. Ou seja, você precisa ter algum tipo de retorno (seja JSON, XML ou até mesmo html). Se der algo errado por exemplo você pode simplesmente retornar um json e obter os valores desejados por javascript e dar algum tipo de feedback para o usuário. Espero ter ajudado, abraços…

  11. olá Alexandre, O que eu faço com um retorno verdadeiro passar para a próxima pagina dando um submit normal com post e tudo mais? to validando um dado se ele for falso vai aparecer uma mensagem de erro isso ja fiz mas, se ele for verdadeiro eu quero que va para proxima pagina que é uma pagina de consulta como eu faço

  12. @Marcelo: O return false serve para não propagar o comportamento padrão do elemento, no caso do submit enviar os dados. Desta forma se no controle do submit não tiver return false ou nenhum retorno ou até mesmo return true ele irá processar a função e no final irá enviar os dados novamente, o mesmo acontece para links e outros elementos que propagam eventos. Espero ter ajudado, boa sorte…

  13. Cara eu estou com uma dúvida foda e urgente!! Usei o validator bonitinho quando o usuario não existe no db ele aparece a imagem bonitinha e tal, agora quando o usuario existe, como eu uso o header(“Location: ../minhaPagina.php”); para carregar ?

  14. Olá, ótimo conteúdo.
    Eu não consegui validar a idade através do minAge, então criei um remote separado pra ele e coloquei:

    Também surgiu uma dúvida, que aqui no meu não valida o select box do campo país.

    Abraço.

  15. Cara, tenho um código que valida meu form com jquery. Este código tb faz mascara para alguns campos. Até entao funciona normal. Agora preciso gravar em um banco, mas antes preciso validar se ja nao existe cpf, rg e email cadastrado. Peguei esse seu codigo só que nao funciona em conjunto com a mascara, saberia uma solução?

    O código da mascara eu faço assim:

    $(document).ready(function()
    {
    //Mascaras
    $(“#cpf”).mask(“999.999.999-99”);
    $(“#cep”).mask(“99.999-999”);
    $(“#telRes”).mask(“(99) 9999-9999”);
    $(“#telCel”).mask(“(99) 9999-9999”);
    $(“#dataDeNascimento”).mask(“99/99/9999”);
    $(“#dependente1dataNascimento”).mask(“99/99/9999”);
    $(“#dependente2dataNascimento”).mask(“99/99/9999”);
    $(“#dependente3dataNascimento”).mask(“99/99/9999”);
    $(“#dependente4dataNascimento”).mask(“99/99/9999”);
    $(“#dependente5dataNascimento”).mask(“99/99/9999”);

    //Validação
    $(“#formulario”).validate(
    {
    rules: {
    nome: {required: true},

    e ai continua a minha validação…

    abraço

  16. Cara eu não consigo fazer a função do ajax, como que eu especifico a página que o formulario deveria submeter
    coloca o código inteiro ou disponibiliza pra download

    flw

  17. @reinaldo e @ed: O intuito desses tutoriais não são “copy n paste”, é para ensinar a utilizar o que foi descrito e para quem está aprendendo usar para solucionar um determinado problema. Provavelmente não estão conseguindo por que não entenderam e não estão aplicando da forma correta.

  18. Olá, você poderia me dar uma dica de como resolver esse problema?, pois estou usando a validação para verificar se já existe um cpf no banco, mas eu utilizo o mesmo formulario para alterar o cadastro da pessoa, e acontence que na alteração ele tb verifica novamente o cpf e não permite proceguir com o mesmo cpf.

  19. Alexandre Magno, há mto tempo procurei por uma validaçao como essa .. aqui funcionou tudo perfeitamente, muito obrigado e sucesso na carreira..

  20. @Fabrício: Sim, esta combinação dos dois plugins é perfeita para qualquer situação que envolve validação de formulários via javascript e envio por ajax. Que bom que tenha ajudado. Muito obrigado e um grande abraço…

  21. Alexandre, caso eu queira que quando a pessoa clicar para enviar, apareça um aviso em ajax na div de “enviando…” + um gif de um preloader e em seguida aparecendo a confirmação ou o erro de envio, só que tudo isso apareça na div em tempo determinado depois sumiriam, seria complicado?

    Sempre estou visitando seu blog, caso você saiba e tenha disponibilidade de fazer esta implementação, com certeza estarei aqui para conferir, abraços…

  22. Alexandre: Tu fez algum exemplo que mostrar a mensagem processando quando os dados estão sendo enviados.Pois estou testando fazer e ainda não encontrei uma solução.

  23. Muito bacana Alexandre .. pena que nada funciona no IE7.

    Afinal, funciona a partir do IE7, ou será que eu fiz algum script errado?

    Beijos.. ;*

  24. Bom dia, achei muito bacana ai o tutorial parabens!

    mas estou com o seguinte problema…

    ele nao chama a função no sucess por nadaa!!!

    tentei fazer igual ao que esta no site para ver se tinha feito
    algo errado… mas mesmo assim nao chama… o que sera q pode ter acontecido!?!?

    abraço!

  25. @Leandro: Muitas vezes isto acontece por que tentamos rodar um script diretamente abrindo no sistema de arquivos, você está rodando em um servidor local normalmente? Preciso saber mais do ambiente onde você está usando para ter uma idéia melhor.

  26. Olá Alexandre, utilizo essa mesma validação no site de um cliente, funciona legal, só que agora meu cliente cismou que ao submeter o envio da mensagem demora um pouco e a pessoa que está enviando fica sem saber o que acontecerá por causa dessa bendita ”demora”. Pra mim não acho muito importante isso, mais de qualquer forma devido o cliente me pedir alguma solução, gostaria de saber se existe alguma possibilidade de integrar essa validação igual à uma do seu site pessoal? Como?

    Obrigado pela atenção.

  27. @Maurício: No submit você pode realizar várias ações como manipular o dom para inserir um loading e outra coisa muito comum é desabilitar o botão para evitar que ele fique enviando repetidas vezes. Espero ter ajudado e boa sorte.

  28. fala serio to fazendo o curso tecnico em informatica e ta super dificil e ta se tornando muito chato.manda umas ajudinhas ai para mim.obrigada

  29. Minha validação funciona ok, porem ao EDITAR, informa que cod_referencia exite, como faço para disconciderar na EDIÇÃO ?

    jQUERY JS

    $(‘#meu_form’).validate({
    // onsubmit: false,

    rules:{
    cod_referencia:{required: true,minlength:3,
    remote: {
    url: “imoveis_verificar_cod_referencia.php”,
    type: “post”
    }
    },
    id_responsavel:{required: true},
    id_cliente:{required: true},
    tipo:{required: true},
    negocio:{required: true},
    bairro:{required: true},
    cidade:{required: true},
    estado:{required: true},
    pais:{required: true},
    valor:{required: true,minlength: 3,maxlength: 21},
    endereco:{required: false,minlength: 3},
    nome:{required: true},
    email: {required: true,email: true},
    senha: {required: true},
    conf_senha:{required: true,equalTo: “#senha”
    },
    termos: “required”
    },
    messages:{
    nome: {
    required: “O campo obrigatorio.”
    },
    cod_referencia:{
    required: “O campo Código Referência é obrigatorio.”,
    minlength: “O campo Código Referência deve conter no mínimo 3 caracteres.”,
    remote: ‘Este Código Referência já está em uso.’
    },
    endereco:{
    required: “O campo nome é obrigatorio.”,
    minlength: “O campo nome deve conter no mínimo 3 caracteres.”
    },
    email: {
    required: “O campo email é obrigatorio.”,
    email: “Formato inválido de e-mail!”
    },
    senha: {
    required: “O campo senha é obrigatorio.”
    },
    conf_senha:{
    required: “O campo confirmação de senha é obrigatorio.”,
    equalTo: “O campo confirmação de senha deve ser identico ao campo senha.”
    },
    termos: “Para se cadastrar você deve aceitar os termos de uso.”
    }

    });// FIM DA VALIDACAO

    REMOTO:

    $campo = $_GET[‘cod_referencia’];
    $id_imovel = $_GET[‘id_imovel’];

    //Aqui você verifica em seu banco de dados, se o login já foi cadastrado.
    $sql = “SELECT id_imovel,cod_referencia FROM imoveis WHERE cod_referencia = ‘$campo’ AND id_imovel != ‘$id_imovel'”;//monto a query
    $qcod_ref = mysql_query($sql);//executo a query
    if(mysql_num_rows($qcod_ref) > 0 ){//se retornar algum resultado
    echo ‘false’;//Se o login já existir você exibe false
    $jatem = ‘Referência Já existe. $id_imovel’;
    }else{
    echo ‘true’;//Se o login não existir você exibe true
    $jatem = ‘Referência Livre!’;
    }
    exit();

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *