Vou falar neste post sobre um plugin para jQuery que deve ser aprendido como parte de sua documentação: o jQuery form plugin

Ele é muito útil para enviar formulário usando ajax, além de controlar a validação client-side de maneira triunfante. Se você não tem idéia de como usar o jQuery para pegar os valores do formulário de uma maneira fácil para ser passado pelo método $.post do jQuery, ou usa o método value() para fazer isto, depois deste plugin você vai fazer isto de uma maneira muito mais eficiente.

Exemplo ilustrativo

Para vocês entenderem o que estou falando, acessem este link: http://www.alexandremagno.net/portfolio_dev/site/contato. Tentem enviar o formulário sem preencher nenhum campo, ou deixando campos vazios e e-mail incorretos. O formulário fez a validação de uma maneira bonita, simples e intuitiva. Isto pode ser totalmente configurado para o plugin, a imaginação é o limite 😉 .

Preencha corretamente o formulário e envie(aproveite e deixe uma mensagem para mim 🙂 ). Ele foi enviado usando ajax, com todos os campos passados para o jQuery, processados pelo php, retornado pelo XML e devolvido ao usuário. Tudo feito pelo plugin. Tentem enviar também sem preencher algum campo ou digitar um e-mail não válido, ele irá mostrar uma validação eficiente e personalizável.

Se deseja então pegar os valores do formulário via javascript para passar para o php com o ajax, além disso tudo externamente, sem usar scripts inline, esta é a solução ideal. Vou colocar o script aqui e explicar o seu código. Não se esqueça que os passos necessários para ele funcionar não ilustrei aqui por ser bastante trivial e ter abordado em outros posts, como inserir no head a framework jQuery e o plugin, que pode ser baixado no seguinte endereço:

jQuery Form Plugin

Vamos ao código:

 $("#carregando").hide();

 $("#carregando").ajaxStart(function(){
 	 $(this).fadeIn('fast');
	 $('#erro_form').fadeOut('fast');
 });

 $("#carregando").ajaxStop(function(){
 	$(this).fadeOut('fast');
 });

 //validando o formulário
 $('#erro_form').hide();
 function validar(formData,jqForm,options) {

var check =
/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var nome = $('input[@name=nome]').fieldValue();
var email = $('input[@name=email]').fieldValue();
var assunto = $('input[@name=assunto]').fieldValue();
var mensagem = $('textarea[@name=mensagem]').fieldValue();
var status = "";

    if(!nome[0]) {

	 status += '
	
  • O nome está vazio
    • 
';

   }
	 if(!email[0]) {
  	  status += '
	
  • E-mail vazio
    • 
';
	 }
	 if(!check.test(email[0])) {
	  status+='
	
  • E-mail inválido
    • 
';
	 }
	 if(!assunto[0]) {
	  status += '
	
  • O campo assunto está vazio
    • 
';
	 }
	 if(!mensagem[0]) {
	 status += '
	
  • O campo mensagem está vazio
    • 
';
	 }
	 if(status!="") {
		 $('#erro_form ul').empty();
		 $('#erro_form').fadeIn('slow');
		 $('#erro_form ul').append(status);
		 return false;
	 }
}

// Callback do retorno do ajax;
function resultado(responseText,statusText) {

	 $('#erro_form').empty().hide();
	 var resultado = $('resposta',responseText).text();
	 if(resultado) {

	 	$('#erro_form').append('

e-mail enviado com sucesso, aguarde que entrarei em contato

').fadeIn('slow');

	 }
	 else {
		 $('#erro_form').append('

Não foi possível enviar o e-mail

').fadeIn('slow');
	 }
	 $('#form_contato').resetForm();

}

 $('#form_contato').ajaxForm({
	 url: '/portfolio_dev/site/enviar',
	 beforeSubmit: validar,
	 dataType: 'xml',
	 success: resultado,
	 type: 'POST'
 });

    Tudo que foi visualizado e executado no formulário de contato mostrado foi feito com este código.

    Vamos a explicação:

    • Linhas 1 a 7: Aqui não é um método específico do plugin, mas sim para controlar todas as requisições ajax, como o plugin usa ajax, este método pode ser aplicado normalmente. Há uma div com o id de carregando que inicialmente fica escondida e com método ajaxStart ela é mostrada através do método fadeIn. o ajaxStart é executado quando uma requisição httprequest está em processamento e ainda não foi finalizada. Reparem que na linha 8 é ocultada uma div com id erro_form. Esta div contém as mensagens de validação e é ocultada para evitar que ela seja mostrada quando o e-mail está sendo enviado. Se você enviar diretamente, sem nenhum erro, esta linha não executará nenhuma ação, no entanto, no caso dela estar mostrada, ela será escondida e ao mesmo tempo aparecerá uma tela de carregando para alertar o usuário que o e-mail está sendo enviado.
    • Linhas 8 a 10: O método ajaxStop é executado quando a requisição httprequest é finalizada. Assim a div com o id de carregando é escondida após o final da requisição.
    • Linha 13: Esta linha esconde inicialmente a div com id erro_form. Quando houver algum erro de validação, ela será mostrada.
    • Linhas 14 a 61: Estas linhas merecem uma atenção especial. Esta função é um callback do plugin, e será especificada na sua inicialização e será executada antes do formulário ser enviado por ajax. Os erros de validação no lado cliente serão especificadas nesta função, caso ela retorne falso, o formulário não será enviado, do contrário ele será enviado e será executada outra função que falaremos mais abaixo. Os parâmetros passados não serão usados para este script por que serve para fazer uma validação mais geral e neste caso será mais personalizado. O parâmetro formData, por exemplo, armazena em um array todos os valores do formulário, mas ao invés disso eu usei o médodo fieldValue() do próprio plugin. Este plugin é bastante versátil e possui várias maneiras de se atingir o mesmo objetivo.
      • Linha 16: Aqui será passada a variável verificaEmail uma expressão regular que verifica a validade do e-mail.
      • Linhas 17 a 20: Os dados do formulário são pegos através do método fieldValue() que retorna um array com os valores dos campos escolhidos pelos seletores.
      • Linha 21: Coloco a variável status como uma string vazia, pois ela irá ser concatenada de acordo com a quantidade de erros
      • Linha 23 a 54: Os dados preenchidos são comparados e verficiados se são vazios e assim a variável status vai sendo acumulada de acordo com a quantidade de campos vazios. Repare que há valores somente de campos únicos, o que retorna um array de um valor.
      • Linha 55 a 60: Se o status foi preenchido, a div erro_form é preenchida com o valor de status(uma string com uma lista não ordenada) e assim é dado um fadeIn para visualização do usuário e é dado um return false para o formulário não ser enviado, caso não entre nesta estrutura condicional, o plugin irá executar um callback de sucesso mostrado abaixo.
      • Linha 64 a 86: Este é a função a ser executada quando o plugin passa sem problemas pela função anterior. Aceita dois parâmetros: responseText(retorno do ajax, que pode ser json, xml, html etc.) e o statusText(se estiver tudo ok ele equivale a success). O responseText, neste caso, foi um xml com um nó chamado resposta que contem verdadeiro ou falso, caso o e-mail tenha sido enviado ou não. Este retorno é manipulado via jQuery de acordo com o contexto. Quando você navega pelo dom usando os seletores jQuery, normalmente passamos apenas um parâmetro, nisto está implícito que o contexto é o documento(document). No entanto, o programador pode selecionar de acordo com outros contextos, como o body, uma div e no caso de um xml retornado por ajax, o contexto seria o objeto de retorno(neste caso o contexto seria o nó principal). Ficou confuso? Acho que esse assunto merece um post especial.
        O retorno do xml foi armazenado na variável resultado e caso seja verdadeiro, é retornado ao usuário uma mensagem de sucesso, do contrário, um aviso de que algo deu errado.
      • Linhas 88 a 94: O método que prepara o formulário para ser enviado por Ajax. Aceita como parâmetro um objeto com as configurações, neste caso, foi passada a url, a função a ser executada para validação e a função a ser executada no retorno. Se não for especificada alguma url, o padrão será o action do form.

    No próximo post irei mostrar como seria enviado este mesmo formulário utilizando o ajaxForm em conjunto com o validate.

    By Ajax, Plugins46 comentários em Ajax form

    46 Replies to “Ajax form”

    1. Cavalheiros. Tudo muito legal mas eu tenho uma única dúvida:

      se eu tivesse vários…

      Selecione
      Opção 01
      Opção 02
      Opção 03
      Opção 04
      Opção 05
      Opção 06
      Opção 07

      Como eu poderia usar o jquery para validar as option lists????

      Responder

    5. Excelente artigo Alexandre. Muito bom o exemplo. Como faço para copia-lo ? Quando uso copy/paste, vem junto várias linhas com “#” no inicio.
      Grato, Odilon

      Responder

    6. Estou indo dar uma reformada no blog e irei instalar o plugin para visualizar o texto “puro” (plain text). Peço desculpas.
      Mas o legal é você digitar o código e personalizar a sua maneira, assim fica melhor de aprender, isto falo por experiência própria…
      De qualquer forma, estou dando uma reforma geral no blog para melhorar certos aspectos de acordo com o feedback de vocês.
      Abraços e obrigado!

      Responder

    7. Claro, você está certissimo. Foi só uma pequena preguiça.

      Mas tenho algumas dúvidas; sou um velho dinossauro, inexperiente em Web, naveguei por seu site (muito bem feito, por sinal) e verifiquei que você utiliza o CakePHP. Não conheço essa ferramenta, mas deve ser muito interessante e como também não conheço o jQuery, gostaria de entender algumas coisas:

      A URL de acesso ao seu site é:”http://www.alexandremagno.net”, que logo encaminha para “/portfolio_dev/site.”
      Bom, o link para a página de contato é fácil de identificar:

      Responder

    8. @Odilon: Muito obrigado cara. Aquele site foi a primeira experiência que tive com o cakePHP e aprendi que só com a mão na massa para aprender as coisas. O encaminhamento da URL se deve a estrutura de diretórios mesmo, por que tenho o blog e o site. Mas o cakePHP trabalha com urls deste tipo. portfolio_dev é onde fica o site e a pasta site é um ‘controller’ que dispara uma ação (index subentendida). Compliquei? A estrutura de url do cakePHP é sempre na forma ‘/controler/action/restante’. Difícil explicar muito com um comentário só :-). Você pode dar uma olhada em http://www.cakephp.com.br/ . Espero ter ajudado. Abraços e boa sorte!

      Responder

    9. Eu quem agradeço Alexandre. Seus posts são muito úteis.
      Meu formulário de envio de email já está ativo !!! Sem cakePHP… mas funcionando!
      Abusando, reparei que sempre que há algum erro no jQuery, por exemplo numa chamada com parâmetros inválidos, ficamos sem saber o que está acontecendo.
      Tem como ligar algum “debug” ou algo semelhante, para acompanhar o que está acontecendo e facilitar a depuração de erros?
      Outra dúvida, não consigo enviar emails com a função nativa mail(). Meu provedor não aceita envio de emails sem autenticação. Qual função com autenticação de emails você sugere ? Estou em dúvidas quanto à phpMailer e a mimemessage.

      Grato, Odilon

      Responder

    10. Esse erro no jQuery acho que se deve por que a página é atualizada e justamente o script se “perde” neste tempo. eu já usei o phpMailer e achei muito bom.
      Espero ter ajudado e obrigado pela confiança.

      Responder

    11. Olá amigo adorei o plugin, agora só fiquei com um problema, não sei se vcs já tiverão, o meu retorno é um arquivo Excel, é eu não estou encontrando uma solução para o retorno, quando eu retorno para um DIV ele joga o arquivo todo bagunçado nele. Se poder me ajudar vai ser de um bom agrado, + foi excelente essa solução.

      Responder

    14. ola não entendi algumas coisas, eu tenho que puxar o jquery-form.js na minha pagina e tb adicionar este codigo que, vc colocou, e o form como fica??
      quando eu tento acessar este link da um erro:
      http://www.malsup.com/jquery/form/

      nos exemplos que eu vi não tem o mesmo codigo q vc citou, pq?
      obrigado

      Responder

    15. @Tiago: O link as vezes fica fora do ar. Você precisa do js no plugin logo após o jQuery e depois ter um código para a página que contém o formulário que você deseja validar. Mas isto é um script / tutorial para aprender como faz.
      Boa sorte e abraços…

      Responder

    17. Como fazer para que o formulário não seja exibido novamente quando os dados forem preenchidos de forma correta, ou seja, que abra uma outra página?
      Parabéns pelo artigo. Excelente!

      Responder

    18. @Ricardo: Muito obrigado! Você pode especificar uma propriedade target e passar o id do form para atualizar o formulário e o retorno ao invés de ser um xml, ser um pedaço de html com a parte da página que será substituida. Espero ter ajudado, abraços e boa sorte.

      Responder

    24. alexandre, parabéns pelo post, pelo blog e pelo seu site… Sou programador em PHP e iniciante em jquery…poderia disponibilizar para que eu possa estudar e ver como é que funciona apos o post do form ( no caso , o que acontece quando a URL ‘/portfolio_dev/site/enviar’ é chamada? ) como é o arquivo php que gera o xml?
      Seria de muita valia para mim…Desde já agradeço

      Responder

    25. @Junio: o recebimento do post pelo PHP seria exatamente o mesmo se não fosse por ajax. O modo como o PHP deve retornar já está implícito na função resultado, que trata o retorno. Basicamente ele navega em um nó de XML com a tag resposta, sendo assim a estrutura que o PHP irá retornar tem um nó principal com a tag resposta e um valor dentro.
      O valor irá retornar 1 ou 0 que correstponde ao sucesso e falha. Só não esqueça de levar em consideração que o tipo de retorno tem que ser xml, então o content-type no arquivo PHP tem que vir logo no início.
      De qualquer forma, vou colocar o XML retornado neste post para ficar melhor o entendimento.
      Espero ter ajudado, abraços…

      Responder

    26. Olá Magno… Parabéns pelo acervo cara, esta sendo de grande valia pra mim seu site 😀

      agora tenho uma dúvida…

      o arquivo PHP que vai efetivar o envio do e-mail esta no sub-diretorio da linha 89 (portfolio_dev/site/enviar) ou eu estou viajando ?! (shuaihsi)

      é pq na verdade sou beeem iniciante no assunto..

      desde ja obrigado 🙂

      Responder

    27. @Renato: Obrigado, fico feliz que tem sido útil em seus projetos. Recomendo que leia o post http://www.alexandremagno.net/blog/2009/04/04/controle-completo-de-formularios-ajax-form-e-validate/ que possui a integração completa entre o Validate e o Ajax Form. Por eu ter usado uma framework cakePHP (e qualquer MVC funcionaria similar) a url é mapeada, então na verdade esta url é um arquivo php, ou seja, você deverá passar o arquivo que irá receber os dados via post. Espero ter ajudado. Abraços e sucesso…

      Responder

    28. Alexandre, como eu faria para executar o form com um evento click. A idéia seria de acordo com o botão clicado usar um option diferente.

      Abraço

      Responder

    30. A idéia é a seguinte…

      Eu colocar dois botões só que cada botão submeter com options diferentes. Por exemplo um botão usar a url: incluir.php e a outra salvar.php

      Responder

    31. @Junior: Não seria melhor enviar os dois para o mesmo lugar e o server trataria de acordo com o que foi passado no form. Exisste realmente a necessidade de separar a logica de envio em dois arquivos?

      Espero ter ajudado e abraços…

      Responder

    32. Primeiramente gostaria de parabenizar pela iniciativa, seus tutoriais são ótimos 😀

      No entanto estou tendo um pequeno problema ao usar esse script que voce explicou acima.

      Tenho um formulário de cadastro que tem como action para cadastrar os dados no banco um outro arquivo cad_usuario.php, e dentro desse arquivo tem um consulta que não deixa cadastrar mais de um CPF igual e ele dá um HEADER para uma pagina quando realizo um cadastro com sucesso, no entanto, usando esse script acima quando tento realizar um cadastro com um mesmo CPF igual ele não cadastra no entanto não me dá nenhuma mensagem dizendo que o CPF já está no banco, e quando realizo um cadastro com sucesso ele não dá o HEADER.

      Então eu gostaria de saber o que que eu tenho que fazer para corrigir esses dois problemas.

      Responder

    33. @Jeovane: Olá, fico feliz que esteja sendo útil os tutoriais. Primeiro de tudo o que você quer dizer com o header? Você especifica um cabeçalho no php e verifica no retorno da requisição? Caso positivo esta não é a melhor forma de lidar com esta situação.

      Qual o retorno quando já existe o CPF?

      Responder

    36. Alexandre meus parabéns, como sempre pelo alto valor técnico de seus posts e da facilidade de entendimento com suas explicações! Bom, algumas coisas que notei no seu outro site alexandremagno.net que tem esse mesmo formulário, é que lá onde tem o caminho pro form, no action, é vazio! claro, se tem essa opção é porque na liha 88 está o caminho para o script em php, url: ‘/portfolio_dev/site/enviar’, e só pra esclarecer mesmo, se não estivesse usando cake, aqui seria o caminho do script php né?! Outra coisa que notei é que aqui você fez o reset, mas não ficou faltando o submit não?! tipo:

      $(‘#form_contato’).submit(function(){
      return false;
      });
      });

      Responder

    37. @Mavi: Fico muito feliz que tenha gostado. Bem, eu não coloquei no action do form por que nesta versão usada no site não estava funcionando corretamente, mas nas versões mais recentes do plugin não tive este problema, é até melhor por que você não precisa se preocupar com caminho, além de ser totalmente não obstrusivo (pode funcionar sem o javascript, pois o post poderá ser dado normalmente).

      Em relação ao submit, o próprio ajaxForm internamente realiza este evento.

      Um grande abraço…

      Responder

    38. Caro Alexandre Magno, só tem um probleminha, é que estou tendo dificuldade com o script em php. Claro entendi tudinho da parte do jQuery form plugin e ficou muito bem explicado. também estive lá na página do plugin e li muita coisa só não acertei no script php. Tentei vários, inclusive os que já tenho funcionando, mas nenhum funcionou corretamente, será que você poderia disponibilizar aqui o script php que você usou para o plugin funcionar corretamente?

      Abraço!

      Responder

    43. Alexandre, estou com um problema no retorno do php, se o retorno é “true” na div mensagem é inserido o valor 1, gostaria de saber como alterar esse valor. Bom não sei se fui muito claro, mas se entendeu gostaria de sua ajuda. Muito obrigado, e EXCELENTE post =D

      Responder

      1. @cause: Ele provavelmente avalia o valor como um, pois true é um valor booleano. Você deve apenas verificar o retorno para inserir o que deseja, ou seja escrever um texto, ou pegar um valor do banco. Você não deve colocar na div o retorno como está vindo, este é apenas um exemplo.

        Responder

    44. Olá amigo,

      Através de suas dicas e com o plugin JqueryForm (http://www.malsup.com/jquery/form/#html), consegui chegar no resultado conforme o link abaixo.

      http://www.wlocation.com/testes/

      Meu problema agora é com as div #status, quando o registro inserido com sucesso no banco de dados, é retornado a mensagem de “Reservado” apenas na célula do dia 1/mesa 1.

      Via Jquery é ocultado a div=#escrever e exibido a div=#status.

      Como eu poderia fazer dezenas de submits cada um com uma div correspondente, ou ontra forma de retorna a mensagem de “reservado” para cada célula?

      Pensei em trabalhar com Array ou o método fieldValue, mas não consegui a solução.

      Por favor ajude-me.

      Desde já agradeço

      Abaixo código do link:

      Link para download do código-fonte:
      https://mega.co.nz/#!XR1TzQjT!4zlB3ezFUcqEj1hQsl89P2JxGak3Gt5cZLDr9VwEIWQ

      Responder

    Deixe um comentário

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