Desenvolvimento - Javascript

Como tratar eventos de formulários com jQuery

Veja neste artigo como tratar os eventos dos formulários de seu site utilizando a biblioteca jQuery para isso.

por Joel Rodrigues


Dentre os vários eventos possíveis que podemos tratar com jQuery, alguns dos mais utilizados no desenvolvimento de aplicações são aqueles ligados a formulários. Por exemplo, é muito comum precisarmos executar alguma ação quando um controle (um input, por exemplo) recebe ou perde o foco, ou quando seu valor é alterado.

E exatamente por serem situações bastante comuns, essa biblioteca nos fornece métodos para tratar esses eventos de forma prática, agilizando o trabalho do desenvolvedor web.

Neste artigo, explicarei como funciona e como utilizar os eventos blur, change, focus, selecte submit.

Juntamente com a explicação teórica de cada evento, apresentarei também um exemplo prático de uso. Para facilitar a implementação de tais exemplos pelo leitor, será utilizada apenas uma estrutura HTML, a qual pode ser salva em um arquivo com essa extensão. No local indicado no header, entre as tags script, o código das próximas listagens deve ser inserido e o arquivo novamente salvo para se verificar o efeito. É importante que cada código seja executado individualmente, para que confusões devido ao funcionamento simultâneo de várias rotinas sejam evitadas.

Listagem 1: Estrutura HTML utilizada

<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//inserir os códigos aqui 
			});
		</script>
	</head>
	<body>
		<form id="form1">
			Digite seu nome:
			<input type="text" id="txtNome"/>
			<input type="submit"/>
		</form>
	</body>
</html>

Abrindo o arquivo com tal código no browser, o resultado deve ser igual ou semelhante ao da Figura 1.

Estrutura básica utilizada

Figura 1: Estrutura básica utilizada

Detalhes sobre sintaxe e funcionamento geral do jQuery não serão abordados nessa publicação, é preciso que o leitor já tenha esses conceitos, ao menos basicamente. Vejamos então cada um dos cinco eventos citados.

blur

O evento blur é disparado quando um determinado elemento perde o foco, o que pode ocorrer se o usuário pressionar TAB, por exemplo, sobre o controle ou se clicar em outra região da página que também receba foco.

Este evento só era implementado, originalmente, por controles de formulário como inputs e textareas, mas alguns browsers mais recentes estão permitindo que outros elementos recebam e, consequentemente, percam o foco, disparando o evento blur.

Outras linguagens utilizam nomes diferentes para tal evento. Por exemplo, no Delphi ele se chama OnExit, enquanto no C# é chamado de Leave.

Na listagem a seguir, temos um exemplo bastante simples, porém de fácil entendimento, onde é exibida uma mensagem quando o campo de texto do formulário perde o foco.

Listagem 2: Exemplo de uso do evento blur

$("#txtNome").blur(function(){
	alert("O input perdeu o foco.");
});

Adicionando esse código no local indicado e abrindo no browser, clique sobre o input e depois clique fora dele ou pressione TAB. A mensagem “O input perdeu o foco” deverá ser exibida.

change

Este evento é disparado quando o valor do controle é alterado e seu uso é exclusivo de elementos de formulário como inputs, textareas, selects, checkboxes e radio buttons.

No caso de selects e radios, ele é disparado imediatamente após o valor ser alterado (nova opção no select ser selecionada ou radio/checkbox ser marcado/desmarcado). Já nos inputs do tipo text e nos textareas, o change só é executado quando o elemento perde o foco, que é quando seu valor é validado.

No exemplo a seguir, após abrir o arquivo atualizado no browser, repita o processo do exemplo anterior, clicando sobre o input e depois fora dele. Nenhuma mensagem deve ser exibida. Em seguida, digite algo no campo de texto e clique fora dele ou pressione TAB, dessa vez a mensagem “O valor do input foi modificado” deve ser exibida.

Listagem 3: Exemplo de uso do evento change

$("#txtNome").change(function(){
	alert("O valor do input foi modificado.");
});

focus

De nome sugestivo, o evento focus funciona de forma inversa ao blur. Nesse caso o evento é disparado quando o elemento recebe o foco. Inicialmente este evento era exclusivo de alguns tipos de elemento como inputs e links, mas os browsers mais recentes estão permitindo que outros controles recebam o foco, executando o evento focus.

Em outras linguagens, como no Delphi, esse evento é chamado de OnEnter ou simplesmente Enter, no C#.

Listagem 4: Exemplo de uso do evento focus 

$("#txtNome").focus(function(){
	alert("O input recebeu o foco.");
});

Executando o código acima, basta clicar sobre o campo de texto e a mensagem indicada será exibida.

Uma aplicação comum deste evento é no destaque dos campos que receberam o foco, por exemplo, mudando a cor do background.

select

Este evento é exclusivo de elementos nos quais se pode digitar texto, ou seja, inputs e textareas e é disparado quando algum texto do controle é selecionado. Essa seleção pode ser feita tanto com o mouse quanto com o teclado, usando as setas direcionais ou atalhos de seleção.

Executando o código abaixo, digite algum conteúdo no input e o selecione em seguida. Uma mensagem deverá ser exibida assim que a seleção for concluída.

Listagem 5: Exemplo de uso do evento select

$("#txtNome").select(function(){
	alert("Texto selecionado.");
});

submit

O evento submit é próprio de formulários e, como se pode imaginar, é disparado quando o form é submetido a processamento, ou seja, quando um controle de submissão é acionado, como um input ou Button com tipo “submit”. Por este motivo, existe um botão desse tipo no formulário dos exemplos, para que este evento possa ser testado.

Após adaptar o conteúdo do arquivo HTML conforme a Listagem 6, pressione o botão submit. A mensagem “O formulário foi enviado” deve ser exibida.

Listagem 6: Exemplo de uso do evento submit

$("#form1").submit(function(){
	alert("O formulario foi enviado.");
});

Em alguns browsers o formulário pode ser enviado com o pressionamento da tecla ENTER, se nele existir apenas um campo.

Conclusão

Os eventos aqui apresentados, como já foi dito, são largamente utilizados por programadores web em aplicações nas quais existem formulários com campos para inserção de texto, ou seja, grande parte delas. Conhecê-los e saber como manipulá-los com o auxílio da biblioteca jQuery pode garantir ganho de desempenho e agilidade na programação.

Com isso finalizo mais este artigo onde busquei apresentar, de forma simples e prática, algumas funções do jQuery para aqueles que ainda não conhecem ou que desejam aprofundar seus conhecimentos a respeito desta biblioteca.

Agradeço a atenção e até a próxima.
Joel Rodrigues

Joel Rodrigues - Técnico em Informática - IFRN Cursando Bacharelado em Ciências e Tecnologia - UFRN Programador .NET/C# e Delphi há quase 3 anos, já tendo trabalhado com Webservices, WPF, Windows Phone 7 e ASP.NET, possui ainda conhecimentos em HTML, CSS e Javascript (JQuery).