http://www.multside.com.br

JQUERY

INSTALAÇÃO & VALIDAÇÃO DE FORMULÁRIOS

http://www.multside.com.br

O QUE É

Primeiramente vamos saber o que é o Jquery.

Jquery é uma biblioteca javascript que possui vários scripts predefinidos que

servem para interagir com sua página HTML.

Com essa biblioteca você pode criar elementos na página, definir alguns efeitos

entre outras coisas.

INSTALAÇÃO

A instalação dessa biblioteca é bem simples:

Vá ao site http://jquery.com/ e faça o download da versão mais atualizada da

Biblioteca Jquery.

Insira sua referência no cabeçalho de todas as páginas que você for usá-lo da

seguinte maneira:

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

ID’S

O Jquery trabalha não com o nome dos objetos, e sim com o seu ID ou CLASS,

por esse motivo, sempre que for manipular um objeto com Jquery coloque um nome

para seu “id” ou para “class”.

Vejamos um exemplo:

<div id=“div1” style=“display:none;”>

Oi

</div>

Nesse exemplo, essa div recebeu o id “div1”, e no seu style colocamos para ela

ficar invisível.

Se na página onde essa div estiver conter a referência do Jquery no cabeçalho

(Tópico Instalação), podemos manipular esse objeto usando a biblioteca com um

efeito bem simples:

http://www.multside.com.br

Colocamos um link falso no HTML da página:

<a href=“javascript:void(0)” id=“link”>Abrir</a>

<div id=“div1” style=“display:none;”>

Oi

</div>

E inserimos no final da página um código simples:

<script>

$(“#link”).click

(

function()

{

$(“#div1”).hide().show(“slow”);

}

);

</script>

Pronto, ao clicar no link você verá um efeito e abrirá a div com a mensagem “Oi”.

VALIDAÇÃO DE FORMULÁRIOS

Vamos ao que mais nos interessa. Como validar um formulário com Jquery, mas

antes vou fazer uma última explicação.

Sempre que for trabalhar com Jquery nos objetos deve-se utilizar $(“”) o que

muda é dentro das aspas, pois se você for utilizar ID deve-se utilizar “#id_do_objeto” e

se for usar “class” deve-se utilizar “.class_do_objeto”.

Agora vejamos um exemplo de formulário a ser validado.

<form id=”form1” method=”POST”>

<p>Nome:</p>

<input type=”Text” id=”nome” class=”campos”>

<p>E-mail:</p>

<input type=”Text” id=”email” class=”campos”>

<p>Comentário:</p>

<textarea id=”msg” class=”campos” rows=”3” cols=”20”></textarea>

<BR><input type=”submit” value=”Enviar”>

</form>

Nesse formulário, temos os campos nome, e-mail e comentário.

http://www.multside.com.br

Caso você não queria que nenhum deles fique em branco antes de ser postado,

faça o seguinte:

Adicione no final do HTML da página o segunte código:

<script>

$(“form1”).submit

(

function()

{

if($(“.campos”).val() == „‟)

{

alert(“Todos os campos devem ser preenchidos.”);

return false;

}

else

{

$.post

(

“pagina_de_acao_do_formularios.php”,

{

nome: $(“#nome”).val(),

email: $(“#email”).val(),

msg: $(“#msg”).val(),

},

function(response)

{

//crie uma div com id=”reposta” na página do formulário

$(“#resposta”).html(response);

//com isso, a resposta que ele receber na página de acao do seu

formulário ele ira jogar na div resposta, com isso você pode mandar mensagens

de erro ou sucesso.

},

“text”

);

}

}

return false;

);

</script>

Esse foi um exemplo simples de validação, no qual ao invés de você definir a

ação da página direto no form usando “action=‘pagina_de_acao_do_formulario.php’”,

você define ela com Jquery e os dados só serão enviados caso os campos estiverem

devidamente preenchidos.

http://www.multside.com.br

CRIAÇÃO

Essa apostila foi criada pela empresa Multside – Sistemas & Soluções, para nos

conhecer melhor, acesse o site: http://www.multside.com.br.

Espero que aproveitem o aprendizado.

Obrigado!