Formulários, ajax, jQuery e validação

terça-feira, 8 dezembro 2009

Neste post vou mostrar um jeito fácil e simples de fazer validação em formulários usando jQuery e os plugins form, e validator.

O nosso form não tem nada demais, é um form HTML normal:

<form id="ajax_form" action="processa_form.php" method="post">
Nome: <input name="nome" type="text" />
Email: <input name="email" type="text" />
<input type="submit" value="Enviar" />
</form>

Devemos incluir as nossas bibliotecas JS:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="http://www.malsup.com/jquery/form/jquery.form.js" type="text/javascript"><!--mce:1--></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js" type="text/javascript"><!--mce:2--></script>

E agora, vamos “ajaxizar” o formulário!

$(document).ready(function(){
  $('#ajax_form').ajaxForm();
});

Simples assim!
Se quisermos atualizar alguma div com o resultado do AJAX também é simples, adicionamos a div na página:

<div id="atualiza"></div>

E modificarmos ligeiramente nosso javascript:

$(document).ready(function(){
  var options = { 
    target: '#atualiza',
  }
  $('#ajax_form').ajaxForm(options);
});

O target é um selector normal de jQuery, pode ser qualquer coisa, este elemento será atualizado com o resultado da requisição do AJAX.
Do jeito que está, o formulário será enviado para procesa_form.php via AJAX e o resultado aparecerá automaticamente na div “atualiza”. E a validação vem agora!
Teremos que re-escrever nosso JavaScript:

$(document).ready(function(){
  $('#ajax_form').validate({
    rules: {
      //Aqui ficam as regras da nossa validação
      nome: "required",
      email: {
        required: true,
	email: true
      },
    },
    submitHandler: function(form){ //Esse bloco será executado após o submit quando tudo estiver Ok
      $(form).ajaxSubmit({
        target: '#atualiza',
      });
    },
  });
});

E bingo! Ele será validado conforme as regras!
Só temos um pequeno problema, por padrão as mensagens vem em inglês!
Para resolver temos dois meios. Um deles é adicionar o arquivo com as mensagens em português que vem junto com o pacote do validator

<script type="text/javascript" src="localization/messages_ptbr.js"></script>

E pronto! Mas se quisermos mensagens personalizadas também dá! Simples assim!

$(document).ready(function(){
  $('#ajax_form').validate({
    rules: {
      //Aqui ficam as regras da nossa validação
      nome: "required",
      email: {
        required: true,
	email: true
      },
    },
    messages: {
      nome: "Você precisa escrever seu nome!"
      email: {
        required: "Você precisa escrever seu email!",
        email: "O email precisa ser válido!"
      }
    },
    submitHandler: function(form){ //Esse bloco será executado após o submit quando tudo estiver Ok
      $(form).ajaxSubmit({
        target: '#atualiza',
      });
    },
  });
});

E pronto! Adicionamos o bloco messages onde descrevemos as mensagens para os validadores diversos.

Leave a Reply

« Hello World!