Formulario - Estilos

Hola!, queria saber si alguien me podria explicar, enseñar o pasarme algun tutorial de como hacer para validar un formulario de la siguiente manera:

Ej: Tengo tres campos; Nombre, Apellido, Email.
Quiero que cuando abandone un campo, lo valide y segun el resultado "pinte" el borde del mismo con un color...
Ej: Cuando ya haya rellenado un campo (ej: Nombre) y pase a rellenar el siguiente campo (ej: Apellido) "me pinte" el borde del campo de un color segun el resultado de la validacion (ej: si esta bien de color verde).

No se si me exprese bien...

Desde ya gracias y saludos.

eso se hace con javascript, la fácil sería buscar un sitio en donde hagan algo similar a lo que deseas, bajes el código y lo estudies.

La verdad esta ahí fuera ...

Gracias a los dos!, de apoco lo voy logrando..

Saludos.

Tengo un problema; no puedo "pintar" el campo, no me sale...
Paso a un pedaso de codigo:

Código :

var mensaje="";
if(formulario.ciudad.value.length < 3) { mensaje += 'Ciudad no valida.<br />'; error=true;}
if(formulario.provincia.value.length < 3) { mensaje += 'Provincia no valida.<br />'; error=true;}
if(error==true){
var alerta_inicio ='<strong>Se encontraron los siguientes errores en el formulario.</strong><br /><br />';
var result=alerta_inicio+mensaje;

No se como sacar el nombre de los campos para indicar el color y cual tiene q pintar...
Encontre este pedaso de codigo q sirve pero no lo puedo adaptar

Código :

colorMal="solid 1px red";
colorBien="solid 1px green";
document.forms[0].elements[a].style.border=colorMal;

Espero su respuesta y a seguir intentando!
Saludos!.

Bueno yo lo resolveria de esta manera:
1. En tu formulario colocar algo parecido a esto :

Código :

<form action="#" method="post" name="formulario">
   Nombre:<input type="text" size="30" name="nombre" id="form_nombre" onkeyup="validar('nombre',this)"/>
   Apellido:<input type="text" size="30" name="apellido" id="form_apellido" onkeyup="validar('apellido',this)"/>
   E-Mail:<input type="text" size="30" name="email" id="form_email" onkeyup="validar('email',this)"/>
   <input type="submit" value="Haz click" />
</form>

2. En un archivo diferente crear tu CSS parecido a esto:

Código :

#form_nombre{
   border:solid 1px #FF0000;}
#form_apellido{
   border:solid 1px #FF0000;}
#form_email{
   border:solid 1px #FF0000;}

3. Y en un archivo JS colocar lo siguiente:

Código :

function validar(variable,camp)
{   var b=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/
   campo = document.getElementById('form_'+variable);
   if(variable == "email")
   {
      if(b.test(camp.value))
      campo.style.border = "solid 1px #00FF00";
      else
      campo.style.border = "solid 1px #FF0000";
   }
   else
   {
      if(camp.value.length < 3)
      campo.style.border = "solid 1px #FF0000";
      else
      campo.style.border = "solid 1px #00FF00";
   }
}