Riprendiamo il discorso della validazione di un form con jQuery allargando decisamente gli orizzonti.
Prima di parlare di Form Hints, vi consiglio di leggervi questo articolo che, credo, sia uno dei più completi, precisi ed esaustivi su come creare un form, come organizzarlo e come validarlo al fine di aiutare nel modo più semplice possibile l’utente finale.
Hint sta per suggerimento e, quindi, racchiude tutte i possibili aiuti che, durante il riempimento di un form, possiamo dare all’utente.
Nella foto qui sopra avete visto uno dei classici hints che compare in un form ovvero la label di un campo non compare accanto o sopra il campo stesso, ma direttamente all’interno salvo sparire quando un utente mette il focus su quel campo specifico e, eventualmente, ricomparire quando il campo perde il focus senza esser stato riempito.
Trovate, ormai, migliaia di questi esempi sparsi nel web specialmente in siti in cui dovete prenotare viaggi e biglietti e dovete scegliere località di origine e destinazione.
Logicamente, jQuery consente di creare tale tipologia di suggerimenti con poche righe di codice, ma per facilitare ancor di più il processo eccovi Form Hints.
Si tratta di un plugin jQuery che vi consente di aggiungere hints con una riga di codice.
Vediamo un esempio veloce :
L’html :
<div id=”jquery-form-hints”>
<form method=”post” action=””>
<p>
<label>
Prova <br />
<input type=”text” name=”prova” title=”Prova hints” />
</label>
</p>
<p><input type=”submit” value=”Ok” /></p>
</form>
</div>
e la semplice parte jQuery :
jQuery(‘#jquery-form-hints’).formHints();
Il plugin è costitutuito da una funzione che non fa altro che prelevare l’attributo title di ogni campo di tipo input o textarea e inserirlo come hint all’interno del campo stesso. Vale il discorso fatto in precedenza sul fatto di controllare, quando il campo perde il focus, se é stato inserito o meno qualche testo all’interno del campo stesso per decidere di riposizionare l’hint o meno.
