Como ignorar o jQuery Validate

Publicado em Publicado por gserrano

O jQuery validate é um plugin que facilita muito a validação de formulários, com poucas linhas você especifica exatamente o que deve ser validado, como e quais mensagens serão exibidas para cada validação.

Porém em alguns momentos ele pode ser um problema, estava fazendo uns testes e procurava uma solução para desabilitar o "Validate" de um form em uma situação específica.

No StackOverflow publicaram umas dúvidas bem parecidas com esta e aprendi uma coisa bacana com o jQuery, que é utilizar a ação direta no DOM, ignorando o javascript.

Supondo que eu tenha o seguinde formulário:

<form id="odesenvolvedor" action="action.php" method="post">
   <input name="blog" value="" class="required" type="text" />
   <input type="submit" value="Valide!" id="validateForm" />
   <input type="submit" value="Não valide!" id="skipValidateForm"  />
</form>

E na página deste form nós configuramos a seginte validação para este form, utilizando o jQuery Validate:

  <script type="text/javascript">
  $(document).ready(function(){
    $("#odesenvolvedor").validate();
  });
  </script>

O problema

Você quer que quando o usuário clicar no botão skipValidateForm o formulário seja enviado sem passar pela validação.

Isso pode acontecer devido a uma alteração nos campos do form, ou a seleção de um algum campo que torne a validação desnecessária, por exemplo.

 

Soluções

1. Submit direto pelo DOM (recomendado)

Esta foi a melhor solução que encontrei para o problema. No botão com id skipValidateForm você informa que o submit deve ser feito diretamente pelo DOM, ignorando qualquer evento relacionado ao submit.

Para fazer isto utilizando o jQuery:

$("#skipValidateForm").click(function(){    $("#odesenvolvedor")[0].submit(); });

Pronto, o evento "click" no botão vai disparar o submit do form pelo DOM – ignorando o Validate.

 

2. Remover os eventos do submit do form

Um método de dar submit no formulário e ignorar o Validate é removendo todos os eventos relacionados ao submit do form:

$("#odesenvolvedor").unbind("submit");

Qualquer submit após a linha acima não irá considerar o validate, pois o evento foi removido.

Esta não é a solução recomendada, pois uma vez removido o evento não vai mais funcionar (no outro botão, que deveria ter submit) – a não ser que novamente seja chamado o validate para o form – nada performático.

Adicionei esta segunda "solução" apenas para mostrar o funcionamento do unbind.

 

Críticas e dúvidas nos comentários! 🙂

Position absolute e conteúdo dinâmico (Ajax)

Publicado em Publicado por gserrano

Esses dias tava com dando problema de posicionamento em um HTML no trabalho.

Uma div estava com posicionamento errado no Internet Explorer (6 e 7) e curiosamente isto só acontecia em uma das páginas, nas outras com html semelhante (e esta mesma div) o erro não acontecia.

O @tivasconcelos me alertou que aquele elemento tinha o position setado como absolute, estudando um pouco o html e js vi que o problema acontecia quando alguns elementos da página eram redimensionados devido ao carregamento de html com ajax.

O problema

No Internet Explorer o posicição quando é absoluta é calculada logo depois que a página é carregada e não é mais atualizada automaticamente.

Se algum elemento tiver as dimensões alteradas (normal quando o conteúdo é carregado dinamicamente por ajax) o elemento com posição absoluta vai ficar lá, estático.

A solução

Sabendo do que causa o problema a solução é simples: atualizar a posição do elemento.

Não é necessário calcular, basta setar novamente a posição como absoluta cada vez que as dimensões de algum elemento da página (que pode influenciar no posicionamento do elemento em questão) for alterado.

Segue o código em jQuery para a solução:

$(".posicao-absoluta").css({position:"absolute"});

 

No meu caso no success do carregamento em ajax eu adicionei esta linha, forçando o reposicionamento no IE.

Dúvidas, angústias, críticas e sugestões nos comentários. 😀

Carrinho de compras com javascript – SimpleCart

Publicado em Publicado por gserrano

Fazia tempo que eu e a Bia planejávamos a Loja do Eu Compraria!, mas ficava apenas na idéia. Este ano começamos a nos mexer parar fazer a idéia virar projeto, e o TCC dela deu um empurrão para definição de prazo.

Um prazo curtíssimo, o desenvolvimento do back-end e a integração com front-end e PagSeguro foi feito em 4 dias (e suas devidas madrugadas) – e os bugs e funcionalidades foram sendo implementados posteriormente.

Para atender este prazo eu precisava de algumas ferramentas boas e fáceis de implementar:

  1. PagSeguro (fácil de implementar e seguro – ponto negativo é o atendimento, taxas e a impossibilidade de algumas alterações cadastrais básicas, como endereço de e-mail)
  2. SimpleCart – o motivo deste post, um carrinho de compras completo em javascript, gratuito e extremamente fácil de entender o código.

 

Feita esta introdução, vamos ao SimpleCart (trato do PagSeguro nos próximos posts sobre a ferramenta).

 

SimpleCart – Carrinho e compras em javascript

Uma ferramenta totalmente em javascript, gratuita e facilmente customizável (o código é bem fácil de entender) que permite o desenvolvimento fácil de um carrinho de compras.

Features:

  • Persistência das informações do carrinho (cookies)
  • Cálculo de frete (por item, por compra ou customizado)
  • Cálculo de taxas
  • Controle de quantidade de itens no carrinho
  • Soma do valor total (produtos, taxa e frete)

 

Configurando o SimpleCart

O primeiro passo é fazer o download do SimpleCart e adicionar o javascript necessário nas páginas que utilizarão o carrinho.

A ferramenta conta com algumas formas de check-out pré configuradas: Google Checkout, Paypal ou e-mail. Porém existe o checkout "custom", que permite que você desenvolva sua própria função para checkout.

O paypal é a função padrão (e a que vou exemplificar neste post), para isso precisamos apenas configurar nosso e-mail (o mesmo da conta no paypal) no SimpleCart.

Setando o e-mail que será usado:

<script type="text/javascript">
	simpleCart.email = "[email protected]";
</script>

 

Na variável cartHeaders você configura quais informações dos produtos serão exibidas quando este produto estiver dentro do carrinho:

simpleCart.cartHeaders = ["Name_noHeader", "Thumb_image_noHeader", "Description_noHeader", "increment_noHeader", "decrement_noHeader", "remove_noHeader", "Quantity_div_noHeader", "Price_noHeader", "Total_noHeader"];

Adicionando "_noHeader" ao final do elemento que será exibido você diz que aquele elemento não terá um "cabeçalho" no seu carrinho, no exemplo acima o carrinho não usa cabeçalho nenhum, portanto exibirá apenas as informações dos produtos adicionados ao carrinho.

Dica: os html de cada produto será montado na ordem que está confirguado por esta variável, então pense como será seu CSS para estipular a ordem correta dos elementos html do seu carrinho.

 

Html dos itens que podem ser adicionados ao carrinho

Antes de mostrar o código vamos entender o funcionamento do carrinho que você está criando. Todo o elemento (normalmente uma div) com a classe "simpleCart_shelfItem" é um produto da sua loja que pode ser adicionado ao carrinho.

Dentro dele você utiliza a classe (class) para definir o nome daquela variável do produto: preço, id, nome, descrição e qualquer outra coisa que você queira, nomeando a classe da seguinte forma: item_NomeVariavel.

Abaixo o exemplo do html de um produto, a nomenclatura das classes é auto-explicativa:

<div class="simpleCart_shelfItem">
  <h2 class="item_name">Awesome T-Shirt</h2>
  <span class="item_price">$35.95</span>
  <input class="item_quantity" value="1" type="text">
  <a href="javascript:;" class="item_add">Add to Cart</a>
</div>

Dica: você pode adicionar as classes em qualquer elemento, inclusive imagens (neste caso o valor será  o src da img). As informações dentro de alguma variável "item_var" podem ser recuperadas no seu script, use a criatividade 🙂

No local onde seu carrinho irão aparecer os produtos adicionados no carrinho você precisa do seguinte HTML:

<div class="simpleCart_items"></div>

Dentro da div acima será exibido cada produto do seu carrinho, conforme os dados informados na configuração "simpleCart.cartHeaders" e seguindo a ordem deles.

Algumas informações que podem ser exibidas, abaixo o nome da classe e a informação que ela representa:

  • simpleCart_quantity – Quantidade de itens no carrinho
  • simpleCart_total – Valor total do carrinho
  • simpleCart_finalTotal – Final total do seu carrinho
  • simpleCart_shippingCost – Valor do frete

Dica: qualquer variável do carrinho pode ser exibida usando este modelo – e você pode inserir novas variáveis caso necessite.

Pronto, com a implementação feita até aqui você consegue adicionar e remover produtos, e exibir informações de cálculo de preço e frete no seu carrinho!

 

Ações do carrinho

Agora você precisa adcionar o link para checkout, para isso também usaremos a classe:

<a href="javascript:;" class="simpleCart_checkout">Checkout</a>



E um link para limpar todos os itens do seu carrinho:


<a href="javascript:;" class="simpleCart_empty">Empty</a>



Com isso seu carrinho estará funcionando – no exemplo deste post com o checkout do Paypal (padrão).


Você pode ver o demo aqui e conferir ele funcionando com algumas implementações a mais no Eu Compraria! Shop.


Em breve eu faço mais posts exemplificando como customizar o checkout, integrar o carrinho com ferramentas de cálculo de frete ou pagamento.


 


Se tiver dúvidas, críticas ou sugestões utilize os comentários!


	


	
	
	






	


		
Encode e decode de URLs no Javascript

		
Publicado em Publicado  por gserrano

	


	
	
	


		
Quando me enviaram o link para uma oportunidade de emprego que resultou no post da vaga de php, o link era "codificado", era uma string que você tinha que decodificar para acessar as informações daquela super vaga de emprego.


Dei uma pesquisada sobre encode e decode de url com o javascript e encontrei uma função nativa que pode ser útil na montagem de URL´s para requisições feitas com ajax. );


encodeURIComponent


O encodeURIComponent é uma função que recebe um único parâmetro, a string que é a url que você vai codificar. A função transforma em código os caracteres especiais.


decodeURIComponent


O contrário da função acima, transforma os códigos novamente em caracteres especiais.


Exemplo:


<script language="javascript">
  var url = "https://andafter.org";
  alert("Encode : " + encodeURIComponent(url));
  alert("Decode: " + decodeURIComponent(url));
</script>



	


	
	
	






	


		
Variáveis multiline no javascript

		
Publicado em Publicado  por gserrano

	


	
	
	


		
É cada vez mais comum manipular uma quantidade enorme de html através do Javascript, seja usando Ajax ou apenas alterando elementos estáticos do html.


Alguns códigos que eu vejo tem "tripas" gigantescas de código html tudo na mesma linha, para se manter dentro de uma variável. Identação zero, não precisa dizer que o código é praticamente ilegível, né?


//Exemplo de código ilegível
var structureTable = "<table><tbody><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr></tbody></table><hr /><h2>Tabela 2</h2><table><tbody><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr></tbody></table>";



Neste caso a estrutura nem é tão complicada, duas tabelas apenas. Mas as vezes a coisa fica FEIA quando existem blocos muito grande de HTML que devem ser manipulados pelo javascript.


Uma solução para lidar com este problema é usar Ajax e carregar o bloco de javascript de um arquivo HTML separado e inserir ele no seu DOM, mas vejo isso como uma requisição desnecessária ao servidor – você fará uma requisição para um conteúdo que não é dinâmico.


A solução que proponho para lidar com strings que são códigos de HTML são variáveis com mais de uma linha no javascript.


Variáveis multiline no javascript


A mesma "structureTable" que defini no exemplo acima vou definir agora, usando quebra de linha para variáveis do JS. Para sinalizar a quebra de linha no Javascript você só precisa usar uma barra invertida  e continuar a variável na próxima linha.


//Exemplo de código legível
var structureTable = "<table>\
<tbody>\
   <tr>\
     <td>Name</td>\
     <td>ID</td>\
     <td>Value</td>\
     <td>Tax</td>\
     <td>Quantity</td>\
   </tr>\
</tbody>";



 


E pronto, você tem sua variável legível e muito mais fácil de dar manutenção depois.