Leandro Garcia

Validação de formularios com jQuery

ção É muito comum que em projetos que desenvolvemos tenham formulários e em formularios é praticamente necessário que haja validações qunaton à entrada de dados. Por mais que tenhamos quer validar a entrada dos dados por backend, uma boa prática é validar no front, através de JS.

A validação por JS é interessante uma vez que poupamos processamento  do servidor por requisições inuteis como uma postagem de dados faltando algum campo requerido, além de ser mais rápido para o usuário. Muito trabalho com validação de dados nos diversos trabalhos em que participei. No entanto, depois que passei a utilizar jQuery o trabalho com validação foi muito facilitado. Uso de vez enquando um plugin chamado jquery validator, mas é muito raro, uma vez que o tamanho dele em KBs pode tornar a página mais lenta de ser carregada, e o que, geralmente, preciso validar é entrada de dados em brando ou formato de emails. Para isso, eu desenvolvi uma função para validar  entrada de dados em branco e formato de e-mail, de frma bem simples e com poucas linhas de código. Essa função só funciona com jQuery.

function validaForm(){
	var emailfilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
	$(".erro").remove();
	$(".emailerr").remove();
	var required = $(".required");
	var req = 0;
	for(i=0;i<required.length;i++){
		if($(required[i]).val() == ""){
			if($(".erro").length == 0){
				$("form").prepend('<p class="erro">campos obrigatorios</p>');
			}
			$(required[i]).css("border-color","#ff0000");
			req = 1;
		}
	}

	var email = $(".email");
	for(i=0;i<email.length;i++){
		if(!emailfilter.test($(email[i]).val())){
			if($(".emailerr").length == 0){
				$("form").prepend('<p class="emailerr">Email errado</p>');
			}
			$(email[i]).css("border-color","#ff0000");
			req = 1;
		}
	}

	if(req == 1){
		return false;
	}
}

Para que esta função funcione, você precisa incluir na tag form o atributo ‘onsubmit=”return validaForm()”‘ e a classe ‘required’ em cada campo que não pode ser em branco, para e-mail a classe ‘email’ como no exemplo a seguir.

<form action="#" method="post" onsubmit="return validaForm()">
	<fieldset>
		<label>Nome</label><br />
		<input type="text" name="nome" class="required" />

		<br />
		<label>Nome</label><br />
		<input type="text" name="nome" class="email" />
		<br />
		<input type="submit" value="OK" />
	</fieldset>
</form>

Espero que seja tão util à vocês quanto écpara mim. Ckique nos links à baixo e veja em funcionamento.
http://tutoriais.leandrogarcia.com/jquery_validacao_formulario/

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Pakus CSS Framework

Estou desenvolvendo um framework CSS para agilizar a maioria dos desenvolvimentos front-end. Ainda não está completo, mas da pra se usar. Ja coloquei o código no Google Code, quem quiser ja pode baixar. No pacote tem um html exemplo com tudo que tem no framework.

Em breve mais novidades.

http://code.google.com/p/pakus/

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

jQuery plugin. Seus últimos tweets exibidos em seu blog

Algumas vezes, precisamos incluir em nossos layouts um box com os últimos tweeets de um determinada conta

A API do twitter não permite que haja mais de 150 acessos à ela no período de uma hora, essa restrição é imposta através do ip que acessa. Por isso, não podemos fazer a requisião através de uma linguagem backend, como o PHP, pois com uma dessas linguagens a requisição é feita através do servidor, logo um único IP. Para driblar essa regra, uma possibilidade é acessar essa API através de Javascript, pois a requisição passa a ser feita através do IP do usuário.

Não é tão simples criar uma função em JS para efetuar essa tarefa, para isso, pesquisando na internet, achei o plugin de jQuery para efetuar essa tarefa.  Ele é bem simples de usar. No pacote disponível para download, há um exemplo de uso.

http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Mascara de campo em JS com jQuery.

É muito comum em aplicações sejam web ou não que alguns campos como telefone, por exemplo, tenham que ter um formato padrão. [(99) 9999-9999]. O difícil é conseguir com que o usuário que acessa essa aplicação digite da maneira correa e não [(999)  99999999], por exemplo.

Recentemente ao desenvolvermos um widget, aqui no iG, no deparamos com a mesma situação, no caso era valor. Em uma busca na net encontramos um plugin para jQuery que faz isso de maneira bem fácil.

Na página do plugin é possível baixar o arquivo que deve ser incluído no código logo abaixo do arquivo de inclusão do jquery.

Algo mais ou menos assim:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Depois vem a mágica.

$(function($){
    $("#date").mask("99/99/9999");
});

Permite apenas números e o formato será 99/99/9999.  Simple viu?

Aí você pode uisar com data, hora, valor, etc…

O “9″ representa número, se usar “a” representará letra, se usar “*” representara caracter.

Simples, fácil e objetivo.

Para usar valore, no entanto, pode não ser o ideal uma vez que se digita da esquerda pra direita o que obriga a digitar todos os valores.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Framework -> Javascript -> jQuery

jQuery é, muito provavelmente, o framework para Javascript mais utilizado no mundo.

Anteriormente eu comentei o que era um framework. Neste vou comentar sobre o jQuery.

O jQuery é uma mão na roda em se tratando de desenvolver qualquer solução para ambiente Web que necessite de interações do lado do cliente.

Uma das maiores vantagens do jQuery é a limpeza/simplicidade do código, pois com muito poucos comandos conseguimos elaborar interações melhor desenovolvidas.

Com o jquery é muito mais fácil trabalhar com eventos como o “click” do que da maneira “tradicional”, pois para se trabalhar com eventos se era necessário implementar diversos comando que acabavam por tornar o código mais pesado e muitas vezes até defícil de se entender e dar manutenção, já com o jQuery, a simples implementação da função “.click” no seu código carregado junto com a página é o suficiente.

O desnvolvimento como jQuery torna o código mais simples e intuitivo.

O Ato de selecionar determinado elemento de uma página é muito mais fácil. O que antes era necessário nettar o id para o elemento e depois utilizar o “document.getElementById(‘id’)”, com o jQuery basta usar o “$(‘#id’)” e funciona da mesma maneira. No javascript não existe um “document.getElementByClass”, o que seria de enorme utilidade para qualquer desenvolvedor, mas no jQuery há. E de maneira muito simples, “$(‘.class’)”, com isso você consegue selecionar todos elementos que tenham a classe “.class” e à partir disso, fazer o que for necessário.

Abaixo vou escrever um código que muda a cor de todos os elementos que tenham a classe “cor”. A Cor inicial será preta.

.cor{color:#000} //Preto

<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>

$(document).ready(function(){
$(".cor").css("color","#ff0000");
});

Explicação:

$(document).ready(function(){ -> Ao final do carregamento da página

$(“.cor”).css(“color”,”#ff0000″); -> Selecionar todos os elementos com a clarr cor, no caso o primeiro, terceiro, quarto e sexto itens da lista e alterar a cor para vermelho.

Esse código pode ser alterado da maneira que mais lhe convier, por exemplo, você quer ter certeza de que apenas os itens de uma lista com a classe cor seja alterados e não os demais, basta incluir o elemento.

<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>

<p>Paragrafo</p>

<script type="text/javascript">
$(document).ready(function(){
$("li.cor").css("color","#ff0000");
});
</script>

Agora se você quer garantir que apenas os itens de uma lista não ordenada mudem de cor:

<ol>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ol>

<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>

<p>Paragrafo</p>

<script type="text/javascript">
$(document).ready(function(){
$("ul li.cor").css("color","#ff0000");
});
</script>

E assim por diante.

Vou escrever uma série de tutoriais para se dar os primeiros passos com jQuery, mas enquanto isso, você pode acessar o site do jQuery e baixar o framework e fazer o doqnload dos exemplos acima.

Abraços.

Veja

Exemplo 1

Exemplo 2

Exemplo 3

Download

• 1 comentário
• Comentar
• Permalink
• Compartilhe

Frameworks

Durante muito tempo resisti ao uso de frameworks, tanto para Javascript quanto para PHP, mas hoje percebo o quanto perdi tempo com essa idéia inútil.

Essa minha mudança se deu após iniciar o uso do jQuery, framework em Javascript. A rapidez com que eu consigo desenvolver aplicações, funções, etc. Chega a ser impressionante em relação ao tempo que eu usava anteriormente, isso sem contar a limpeza do código, o menor número de código para fazer as coisas e as probabilidades que eu, agora, tenho em mãos.

Uma coisa deve-se ficar claro, framework não é uma linguagem de programação, não é uma metodologia de desenvolvimento, é, um conjunto de funcionalidades implementadas em determinada linguagem para serem utilizadas para auxiliar o desenvolvimento de aplicações. Trazendo maior velocidade, acerto no desenvolvimento do código.

Os frameworks, pelo menos a maioria deles, são desenvolvidos tendo a idéia de orientação a objetos.

O mais legal de um framework é que eles não são “engessados”, mas podem ser adaptados para cada projeto que você utilizem.

Os Frameworks não são linguagens de programação!

Existem Frameworks para, praticamente, todas as linguagens de programação e, em boa parte delas, váriosframeworks diferentes.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe