Cambiare immagine a seconda del contenuto di una casella di testo.

Salve a tutti.

Sto cercando di modificare una immagine a seconda del contenuto della casella di testo.

Il mio scopo è quello di creare un form che informi l'utente, senza il submit, se ha completato le operazioni necessarie. Le caselle di testo obligatorie hanno quindi una piccola immagine a fianco che può essere una X se il campo ancora non è stato compilato (null) o un "Check" se il campo è invece stato compilato (basta l'inserimento di testo per ora).

Sto provando, con JS, ad usare l'onChange ma senza risultati. Se qualcuno può aiutarmi mi farebbe un grossissimo favore. Grazie!

Personalmente trovo onChange un evento un po' scomodo, perché viene chiamato in certe occasioni, non in altre, ci sono rigiri se qualcuno incolla un valore, etc.

Di solito uso onKeyUp, puoi dare un occhiata in fondo a questo script per vedere come assegnarlo in diversi browser.

Saltando un po' più avanti, dovrebbe essere qualcosa del genere:

Codice HTML:

---

<script type="text/javascript">
function checkForm (textbox)
{
  if (textbox.value == '')
      return false;
  if (...) // altre condizioni di non validità
      return false;
  // tutto a posto?
  return true;
}
</script>
...
<input type="text" name="..." value="..." onchange="document.getElementById('valid-image').src = checkForm(this) ? 'ok.jpg' : 'no.jpg';" />
<img id="valid-image" src="no.jpg" width="..." height="..." alt="validità campo" />

---

- "ok.jpg" è l'immagine che viene caricata con il campo corretto
- "no.jpg" è l'immagine caricata con il campo sbagliato

Stammi bene...

Anche se ho dovuto spulciare un pò il manuale JS per comprendere a pieno il codice non posso che fare inchino, baciapiede e ringraziare sentitamente!