Webpoint

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 += '
<li>O nome está vazio</li>
 
';
 
   }
	 if(!email[0]) {
  	  status += '
<li>E-mail vazio</li>
 
';
	 }
	 if(!check.test(email[0])) {
	  status+='
<li>E-mail inválido</li>
 
';
	 }
	 if(!assunto[0]) {
	  status += '
<li>O campo assunto está vazio</li>
 
';
	 }
	 if(!mensagem[0]) {
	 status += '
<li>O campo mensagem está vazio</li>
 
';
	 }
	 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.