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

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.

• 1 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