Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pedraozaum

Simplificar função Append Jquery

Por , em Javascript

Recommended Posts

pedraozaum    0

pedraozaum
Postado

Olá,

 

Gostaria da ajuda de vocês em uma questão: Estou fazendo um formulário com validação, e quero que quando o campo receber foco ele troque o fundo, quando sair o focu valide o campo. Se correto fica verde e apareçe uma imagem ao lado simbolizando certo, senão fica vermelho e apareçe uma imagem simbolizando errado.

Eu consegui fazer isso porem tenho que criar uma tag <img src"" /> pra cada campo que quero validar, e queria que isso fosse criado automaticamente pelo script. Ou seja ficaria <input ..../ > + a criação dinamica da tag <img src"" /> após esse input.

 

Sei que na biblioteca Jquery tem como fazer isso utilizando a função Append da mesma, porém quero gerar um script mais leve e especifico.

 

Obs: Segue as imagens para teste:

Imagem Postada

Imagem Postada

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function addLoadEvent(func) 
{
  var oldonload = window.onload;
  if (typeof window.onload != 'function') 
  {
    window.onload = func;
  } 
  else 
  {
    window.onload = function() 
	{
      oldonload();
      func();
    }
  }
}

function bgs() {
	var inputs = document.getElementsByTagName("input");
	for (var i=0; i<inputs.length; i++)
	{
	  // quando recebe o foco
	  inputs[i].onfocus = function () 
	  {
		  this.style.backgroundColor= "#FFFFCC";
	  }
	  // quando perde o foco
	  inputs[i].onblur = function () 
	  {
		  this.style.backgroundColor= "#FFF";
		  if (this.value == "")
		  {
				 this.style.backgroundColor= "#F00";
				 imagem = this.parentNode.getElementsByTagName("img")[0];
				 imagem.src= "errado.png";
		  }
		  else
		  {
				imagem = this.parentNode.getElementsByTagName("img")[0];
				imagem.src= "certo.png";
		  }
	  }
	}
}
addLoadEvent(bgs);
</script>
</head>

<body>
<form name="cadempresa" action="" method="post">
<table width="400" border="1" cellspacing="2" cellpadding="5">
  <tr>
    <td>CNPJ:</td>
    <td><input type="text" name="cnpj" maxlength="18" onkeypress="cnpjmasc(event, this)" onfocus="marcar(this)"  onblur="desmarcar(this)" />
    	 <img src="" />
    </td>
  </tr>
</table>
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Crie uma div ou um paragrafo com a classe "validação" ou coloque isso no input e troque o FUNDO do input para a imagem correta:

 

CSS:

 

.validacao {

}

.invalido {
    background: url(imagem_invalido.png) no-repeat left;
    color: #C00;
}


.invalido {
    background: url(imagem_valido.png) no-repeat left;
    color: #090;
}

A seguir, altere a classe com jQuery:

 

$(".validacao").each(function(){
    $(this).blur(function){
        var validacao = validar($(this).val());
        if(!validacao)
            $(this).addClass("invalido");
        else
            $(this).addClass("valido");
    }
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedraozaum    0

pedraozaum
Postado

Obrigaod Rick, mas na verdade eu não quero usar a biblioteca jQuery, eu quero criar como se fosse a função append do mesmo só que utilizando somente javascript puro.

 

Não sei pq moveram meu tópico para cá se não quero usar framework.

 

Deixa eu tentar explicar a lógica que quero usar.

 

cria previamente uma tag de imagem <img src="" />

e usar a função appendChild do js para colocar ele após o input.

para isso preciso saber como inserir essa tag depois do input(nó).

e também como modificar esse nó recem criado. creio eu que se conseguir criar posso modificar o atributo usando o setattribute.

 

Porém não sei com fazer isso, pois da maneira que citei não funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito