validar Input con imagenes icons

[flashtkd]

hola como se logra hacer este tipo de validacion, independiente de lo que se valide, puede
ser email, numeros, algoritmos, etc.

la cosa es que cuando esta bien ingresado aparece un incons de bien, si esta mal aparece
un icons de que esta malo, si no hay nada no aparece nada.

todo esto ocurre en tiempo real, luego que dejan de escribir y salen del input.

imagenes para que se entienda mejor, aca valida numeros :







como se llama este tipo de validacion con imagenes, en ves de usar alert

[Rosencrantz]

esas imagenes las puedes guardar en una variable js algo asi:
<script>
var ok='<img src="ok.gif">';
var bad = '<img src="bad.gif">';
</script>

en html pones un span vacio al lado del elemento que vallas a validar p.e:
Codigo
<input type="text" name="codigo" id=codigo" /><span id="spanBla"></span>

ahora en javascript dependiendo de lo que quieras hacer
<script>
if(document.getElementById('codigo').value==' '){ //no escribio nada
document.getElementById('spanBla').innerHTML(bad);
}
else
document.getElementById('spanBla').innerHTML(ok);
</script>

Nota el uso de la propiedad innerHTML en el span lo que hace es injectar la imagen que guardamos en la variable la cual esta definida como codigo html.

Puedes empezar por ahi, ya mas adelante mira Ajax o Jquery.
Saludos

[maycolalvarez]

bueno, la puedes hacer desde el mismo javascript, es solo cambiar dinámicamente la imagen, puedes tener ambas con display:none y al validar muestras una de las 2, es más simple de lo que crees , usarias AJAX si y solo si necesitaras validar contra base de datos o server.

suerte!