Evento alla compilazione di un campo

[Fello]

Ciao a tutti, mi piacerebbe fare una cosa di questo tipo:

supponiamo di avere una form con diversi campi, mi piacerebbe che durante la compilazione dei campi da parte di un utente apparissero delle faccine (triste in caso di errore, sorridente in caso di correttezza del dato) e seconda che i dati inseriti siano corretti o sbagliati.

In modo tale che l'utente abbia elementi di controllo relativamente ai dati inseriti prima di premere il fatidico tasto invio.

Come posso fare una cosa del genere?

[Fello]

Ho provato a pensare una cosa del genere:

prendiamo in considerazione un eventuale campo mail, se un utente digita:
pippo.pluto@ciao

e poi cambia campo vorrei che lo script intercettasse questo errore facendo apparire a lato del campo di input una faccina triste.

In modo tale che l'utente si allertato dell'errore prima che prema il testo invio.

Come posso realizzare una cosa del genere?

[cavicchiandrea]

Originariamente inviato da Fello
Ho provato a pensare una cosa del genere:

prendiamo in considerazione un eventuale campo mail, se un utente digita:
pippo.pluto@ciao

e poi cambia campo vorrei che lo script intercettasse questo errore facendo apparire a lato del campo di input una faccina triste.

In modo tale che l'utente si allertato dell'errore prima che prema il testo invio.

Come posso realizzare una cosa del genere?

Puoi partire da qui articolo html pro
Ricordati che quello che vuoi fare è comunque complesso x un esperto ne vale veramente la pena?
Buon lavoro.

[Xinod]

<script type="text/javascript">
<!--
function controllo(quale){
	if(quale.value!=''){
		var im=document.createElement('img');
		var pattern= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
		if(pattern.test(quale.value)){
			im.setAttribute('src','smile.gif');
		}
		else im.setAttribute('src','frown.gif');
		quale.parentNode.replaceChild(im,quale.nextSibling);
	}
}
//-->
</script>

<form>
<input type="text" id="email" onblur="controllo(this)" /><span></span>
</form>

in questo esempio ho un elemento vuoto nell' html che immediatamente segue il campo, ma se la tua struttura html ha gia' un elemento destinato a contenere l' immagine potrebbe essere opportuno cambiare lo script

[Fello]

Grazie ad entrambi per gli spunti che subito proverò!!

@cavicchiandrea
io vorrei cercare di facilitare il più possibile la compilazione delle form, in modo tale che arrivati al fatidico tasto "invia" non ci siano problemi od errori che magari mi fanno perdere il contatto.

Lo so che un esperto non sbaglierà mai a scrivere la propria mail, ma utenti meno avvezzi al web potrebbero farlo.
-------------

@tutti
Tralasciando l'aspetto tecnico, questa soluzione come vi sembra?
Mi suggerite qualcos'altro? (sempre lato client)

[Fello]

Ciao Xinod, ho appena provato il tuo script e devo dire che fa proprio al caso mio!

l'unica cosa che non capisco è questa, qualsiasi immagine faccio al posto di smile.gif e frown.gif vengono visualizzate schiacchiate.....
hanno sempre dimensioni 20*20 anche se in realta sono 20*100.

Come posso risolvere?

[Fello]

Ciao xinod, grazie ancora per il supporto.....
sono riuscito a modificare le proprietà dell'immagine in modo corretto grazie al tuo suggerimento, ora però avrei un'altra piccola domanda...

ho provato ad applicare la funzione a più campi, naturalmente cambiano il nome della funzione e i relativi controlli, ma in questo modo non fuziona più niente, nemmeno la funzione da te postata.

Quali variabili devo modificare per applicare ad ogni campo quel tipo di funzione con controlli personalizzati per ogni campo?

[Xinod]

ci sono molti modi di procedere, posso vedere la pagina online in modo da non perdere + tempo del necessario?

[Fello]

Grazie Xinod, dopo numero tentativi ce l'ho fatta, facevo un errore di sintatti su un controllo!!

Grazie!

[Xinod]

ottimo