Programo em troca de Comida

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

Dec 8th

Posted by taverneiro in Programo em troca de Comida

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.

Fonte:Programo em troca de ComidaBlog sobre programação e coisas nerd em geral.Formulários, ajax, jQuery e validação

jQuery, programação

Hello World!

May 22nd

Posted by taverneiro in Programo em troca de Comida

No comments

Com essa famosa frase começo meu humilde blog!

Pretendo, passar, por aqui, os problemas, soluções e visões do dia-a-dia de um nerd trabalhando e convivendo em uma agência de publicidade, cercado de pantones, cores, relações humanas e outras coisas assustadoras!

Eu sou um nerd assumido, estudante de ciências da computação, jogador de RPG, amante de quadrinhos, trekker e programador. Trabalho com publicidade porque odeio ter que usar camisa, sapato e gravata, coisas que muito dificilmente terei que usar em uma agência. Amo a internet, vivo na internet e respiro internet!

Espero agregar um pouco de conhecimento para qualquer coisa com isso aqui! =D

Fonte:Programo em troca de ComidaBlog sobre programação e coisas nerd em geral.
Hello World!