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";
}
}