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!


	


	
	
	






	


		
CSS3 – Background Gradient

		
Publicado em Publicado  por gserrano

	


	
	
	


		
Retomei meus estudos de HTML5, que eu gostaria de publicar por aqui mas sempre acabo apenas na leitura, mas resolvi utilizar CSS3 na versão nova do And After, deixando de lado preocupações visuais com o Internet Explorer.


Curvas arredondadas e backgrounds com gradientes funcionarão apenas em navegadores com suporte ao CSS3, porém posicionamento, tamanho, formatação de texto e funcionalidades funcionarão perfeitamente em qualquer navegador. Acho que esse é o método de desenvolvimento ideal – e mais rápido.


Vou abordar alguns temas relacionados ao CSS3 nos próximos posts, vamos ao background com degradê!


 


Background gradient com CSS


Fazer um background sem imagens tem diversas vantagens, entre as principais posso listar: menos kb para carregar, facilidade na manipulação por javascript, manutenção mais fácil.


Debatendo com o @MathieuRousseau sobre o uso ou não do CSS3, levantamos a questão da infelicidade que é não existir um padrão bem definido para o CSS3, mas a implementação não é tão dolorosa assim, apesar de ainda não funcionar corretamente uma forma cross-browser única.


Vamos a exemplos do código!


Gradiente vertical


.boxVertical {
            background-color: #333; /* cor do bg caso tudo abaixo de errado */
            background-image: url(images/linear_bg_2.png); /* imagem usada caso não exista suporte ao css3 (IE) */
            background-image: -moz-linear-gradient(100% 100% 90deg, #333, #efefef); /* para o mozzila */
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/ }


 Gradiente horizontal


.boxHorizontal {
            background-color: #333; /* cor do bg caso tudo abaixo de errado */
            background-image: url(images/linear_bg_2.png); /* imagem usada caso não exista suporte ao css3 (IE) */
            background-image: -moz-linear-gradient(100% 100% 180deg, #333, #efefef); /* para o mozzila */
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#333)); /* para o webkit*/
} 


 


Como usar o -moz-linear-gradient


-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )



Point


Descrição: Interpretado como "background-position", define onde deve começar o gradiente.

Valores: porcentagem, pixels, "left", "center", or "right" para horizontal e "top", "center", ou "bottom" para vertical.


 


Angle


Descrição: ângulo da direção do gradiente.

Valores: degrees (90deg), grads (100grad), radians (1rad)


 


Stop


Descrição: valor  composto de uma cor seguido por uma "parada" opcional (percentual ou px) que define a cor e a extensão dela no gradiente.

Valores: porcentam ou px (stop) e cor (hexadecimal, rgb…)


 


Para mais informações leia a documentação completa (em inglês)


 


Como usar o -webkit-gradient


 -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)


 


type


Descrição: define o tipo de gradiente

Valores: linear ou radial


 


point


Descrição: um par de valores separados, que definem de onde irá o gradiente. Os dois pares definem início e fim de X e Y do gradiente.

Valores: pixels, porcentagem ou top, bottom, left e right


 


radius


Descrição: define o raio do gradiente radial

Valores:


 


Stop


Descrição: valor  composto de uma cor seguido por uma "parada" opcional (percentual ou px) que define a cor e a extensão dela no gradiente.

Valores: porcentam ou px (stop) e cor (hexadecimal, rgb…)


 


Curiosidades


O webkit, pelo menos até agora, continua carregando a imagem de background, mesmo que ela não seja exibida.


O Firefox (-moz) a partir da versão 3.6 não faz o download da imagem quando é utilizado o gradient, economia de uma requisição http!


 


Dicas Go Horse


    

  • O Internet Explorer sempre será um problema, porém ignorá-lo completamente não é uma solução boa. Mas se preocupar muito com ele é uma péssima idéia.
    • 

  • O site não precisa renderizar exatamente igual em todos os navegadores, deixe esta idéia de lado se preocupe apenas em fazê-lo funcionar em quase todos os navegadores.
    • 

  • Na nova versão do And After e no Eu Compraria! Shop resolvi ignorar o Internet Explorer quanto a border-radius e background-gradient. O usuário de IE poderá usar e navegar no site todo, sem problemas… porém a experiência visual (falei bonito, ein?) de quem utilizar um navegador decente será muito mais agradável: shadows, text-shadows,border-radius,background-gradient… não usei imagem de background no IE, apenas a cor de fundo, assim economizo requisições http.
    • 



 


Não achei muita coisa em português explicando sobre o background-gradient, então resolvi explicar um pouco mais ao invés de só publicar exemplos, espero que seja útil.


Duvidas e sugestões nos comentários!


 


Mais referências sobre background-gradient em:



	


	
	
	






	


		
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>