Problema com validaçao Formulario

[ExsEcrAtUs 0]

Ola pessoal eu estou com um problema, mais por falta de conhecimento doq problema de navegador mesmo. Eu queria fazer uma validaçao dinamica nos campos de um formulario, nada q fosse muito complicado de entender pois eu ainda sou meio fraquinho em javascript... O formulario seria mais ou menos como o da figura 1:

 

O * significa que o campo eh de preenchimento obrigatorio, caso o usuario preencha o campo e passe para o proximo o * seria substituido por uma imagem ou caracter semelhante, como na figura2:

 

Caso o usuario submeta o formulario sem preencher o campo ele alteraria o * por um figura e uma frase com outro estilo css, diferente do aplicado no *, como na figura3:

 

Nao precisa ser um script muito complicado nao, eh que eu realmente nao sei por onde começar e os exemplos da net ou sao complexos demais ou nao atendem ao que eu quero.

 

Agradeço de antemão qualquer ajuda de voces! =)

 

obs: como eu posto muito pouco nao sei se o post esta na seçao correta, caso nao esteja por favor movam para a seçao correta.

 

Vlw!

[LeonardoAP 0]

Nesse caso eu aconselho voce a usar umas divs invisiveis contendo essas 3 informacoes, e mostrar cada uma na hora que lhe for mais conveniente. Fiz um script pra voce.

Não ficou muito funcional não, mas voce pode alterar facilmente para o que voce quiser:

 

// Defino aqui os estilos iniciais das divs<style>  #asterisco_campoUsuario { display: block;}  #correto_campoUsuario { display: none;}  #obrigatorio_campoUsuario { display: none;}  #asterisco_campoSenha { display: block;}  #correto_campoSenha { display: none;}  #obrigatorio_campoSenha { display: none;}</style>//Aqui o javaScript, são 2 funcoes, uma (testar) é para ver se o campo já foi preenchido// a outra (validar) é para saber se os dados estão corretos para enviar o formulario<script language="JavaScript">  function testar(campo)  {	var tamanhoTxt = document.getElementById(campo).value.length 		if(tamanhoTxt >= 1)	{	  document.getElementById("asterisco_" + campo).style.display = 'none'	  document.getElementById("correto_" + campo).style.display = 'block'	  document.getElementById("obrigatorio_" + campo).style.display = 'none'	}	else	  {		document.getElementById("asterisco_" + campo).style.display = 'block'		document.getElementById("correto_" + campo).style.display = 'none'		document.getElementById("obrigatorio_" + campo).style.display = 'none'	  }  }  function validar()  {	var usuario = document.getElementById("campoUsuario").value	var senha = document.getElementById("campoSenha").value		if(usuario.length <= 0) 	{	  document.getElementById("asterisco_campoUsuario").style.display = 'none'	  document.getElementById("correto_campoUsuario").style.display = 'none'	  document.getElementById("obrigatorio_campoUsuario").style.display = 'block'	  	  var confirma_usuario = false	}	else	  {		var confirma_usuario = true	  }		if(senha.length <= 0) 	{	  document.getElementById("asterisco_campoSenha").style.display = 'none'	  document.getElementById("correto_campoSenha").style.display = 'none'	  document.getElementById("obrigatorio_campoSenha").style.display = 'block'	  	  var confirma_senha = false	}	else	  {		var confirma_senha = true	  }				if(confirma_usuario == false || confirma_senha == false) 	{	  return false	}		if(confirma_usuario == true && confirma_senha == true)	{	  return true	}	  } </script>//Aqui o codigo HTML contendo o formulario<form action="paginaDeResposta.ext" method="POST" onSubmit="return validar()">  <table>	<tr>	  <td align="right"><label>Usuario</label></td>	  <td><input type="text" id="campoUsuario" onBlur="testar('campoUsuario')"></input></td>	  <td>		<div id="asterisco_campoUsuario">*</div>		<div id="correto_campoUsuario">OK</div>		<div id="obrigatorio_campoUsuario">Campo Obrigatório</div>	  </td>	</tr>	<tr>	  <td align="right"><label>Senha</label></td>	  <td><input type="text" id="campoSenha" onBlur="testar('campoSenha')"></input></td>	  <td>		<div id="asterisco_campoSenha">*</div>		<div id="correto_campoSenha">OK</div>		<div id="obrigatorio_campoSenha">Campo Obrigatório</div>	  </td>	</tr>  </table>  <input type="submit" value="entrar"></input></form>

Qualquer duvida posta ae