[Resolvido] Como fazer, efeito google ?

[3dmaniaco 1]

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif Falae Pessoal, Tudo bem ?!?!? http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Estou fazendo um formulário com PHP e MySql, e queria dar mais dinamismo a ele, eu queria fazer o seguinte:

 

Eu queria fazer tipo o efeito dos formulários do Google.

 

Quando você digitar algo no campo, depois sair dele, aparece uma TARJA vermelha para alguma informação de ERRO tipo ( FORMATO DE EMAIL INVáLIDO ).

 

Ou TARJA vermelha para quando esta tudo preenchido direitinho.

 

Essas TARJAS gostaria que aparecesse ao lado dos campos.

 

Entenderam minha idéia ?!?!?

 

:lol: Desde já, muito obrigado. Toda ajuda será muito bem vinda. :lol:

[cristiadu 0]

bom, faça uma função em javascript que verifique os dados e a chame no evento onblur do textbox :D

 

daí para aparecer a tarja, use uma div e coloque o valor para ela (com a tarja vermelha ou verde e tal) quando o valor for correto ou incorreto.

 

Desculpe por não dar agora um exemplo com o código, sei a lógica do que fazer, mas ainda sou um tanto quanto leigo em javascript. Se esperar um tempo razoável até eu fazer um exemplo que funcione, posso até postar...

[visitante_xp 0]

Isso você vai conseguir com Javascript ou Jquery.

 

O que você quer é uma mascara dinâmica. Peça para a moderação mover o tópico. Lá você vai encontrar a solução.

[João Batista Neto 448]

Movido:

 

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript

[William Bruno 1501]

Exemplo de plugin jQuery:

http://jquery.bassistance.de/validate/demo/

[cristiadu 0]

Um exemplo super simples sobre o que você quer fazer...

só verifiquei se o email contém ponto e arroba, o restante é parecido.

 

<script language="javascript">

function Verifica(txt)
{
   obj=document.frmTeste;
   resultado = txt.value.indexOf("@");
   resultado2 = txt.value.indexOf(".");

   
   // Index Of sempre retornará um valor = -1 se não tiver o caractere e um valor maior que 0 se tiver.
   if ((resultado>0)&&(resultado2>0))
   {
     if (txt.name="txt1")
     {
     document.getElementById("divVerifica").innerHTML="<font color='green'><b>Email correto</b></font>";
     }
     else if (txt.name="txt2")
     {
      document.getElementById("divVerifica2").innerHTML="<font color='green'><b>Email correto</b></font>";
       
     }   
   }
   else
   {
    if (txt.name="txt1")
     {
     document.getElementById("divVerifica").innerHTML="<font color='red'><b>Email incorreto</b></font>";
     }
     else if (txt.name="txt2")
     {
      document.getElementById("divVerifica2").innerHTML="<font color='red'><b>Email incorreto</b></font>";
       
     }   
     }
    
}
</script>
<form name="frmTeste"><input type="text" name="txt1" onblur="Verifica(this);"/><div id="divVerifica"></div>
<input type="text" name="txt2" onblur="Verifica(this)"/><div id="divVerifica2"></div>
<textarea name="txtarea" rows="6" ></textarea>
<input type="button" value="Gerar Codigo" name="btnGera" onclick="geraCodigo(txt1.value,txt2.value);"/>
</form>

[3dmaniaco 1]

huuum muito interessante esses exemplos.

 

Dai no caso, se eu quiser que apareça um icone ao lado do campo, no caso eu criaria um DIV aonde desejo que apareça o icone, é isso ????

[cristiadu 0]

Bem, foi a solução que pensei para o que você quer fazer, não sei se há outra maneira mais fácil, mas seria isso sim... e dá certo :)

[Thiago Retondar 18]

O tópico já foi resolvido é tal, mas só queria falar que é bom fazer a validação do lado server side também, caso o JavaScript do cliente esteja desabilitado.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif