Ajax form

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.

    Deixe uma resposta

    O seu endereço de email não será publicado Campos obrigatórios são marcados *

    *

    Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>