Sviluppando form di inserimento dati, sia per la messaggistica, per gli acquisti o i pagamenti capita quasi sempre di dover gestire una pagina di conferma successiva al corretto invio dei dati.
Se l’elmento da gestire lo stiamo creando da zero abbiamo la possibilità di creare la struttura html/css in un contesto sandboxed senza eccessivi problemi, tuttavia se dobbiamo invece mettere mano ad un form già esistente di un applicazione dinamica costruita tramite molteplici template il modo più veloce per vedere l’html finale è effettuare delle prove sul form inserendo i dati corretti per arrivare alla pagina di conferma.
Per ogni modifica successiva che andremo ad apportare avremo bisogni di ripetere l’operazione, tante volte quanti sono i ritocchi.
In un articolo postato su CSS-tricks Chris Coyier espone un approccio di automazione di questa operazione ripetitiva via JavaScript, un sistema che ho adottato anch’io alcuni mesi fa per il form di prenotazione su venere.com con l’obbiettivo specifico di velocizzare l’operazione sui dispositivi touch, sia smartphone che tablets, dove la compilazione continua dei form tramite la tastiera virtuale e l’autocorrettore risulta particolarmente lenta e frustrante.
Unica differenza che ho adottato è stata per la generazione della stringa da inserire per i campi dei nomi di persona. Anzichè creare una lista di caratteri consentiti dai quali pescarne un numero fisso ordinato casualmente ho preferito lasciare la generazione completamente al caso sfruttando la funzione JavaScript toString();
Generando una serie di numeri casuali con la funzione Math.random() ed applicando al suo risultato il meotodo toString() con una radice di 36 i numeri corrispondenti a caratteri latini vengono convertiti nel carattere corrispondente, applicando inoltre il metodo substring(2) andiamo ad eliminare i primi due elementi della cifra che sono lo 0 ed il punto.
Alcuni caratteri però rimarranno in cifre, e se il vostro form è pignolo come il nostro probabilmente andrà a controllare se il nome inserito non contenga i numeri dato che almeno per il momento non esistono nomi di persona che contengono cifre.
Per rimuovere i numeri residui usiamo una semplice regular expression che intercetta le cifre e le rimuove sostituendole con il nulla :
|
1 2 3 4 5 |
function randomLatins() { var string = Math.random().toString(36).substring(2); string = string.replace(/[0-9]/g,''); return string; }; |
Queto esempio mostra tutti i singoli passi :
1
Questo approccio per compilare i form è una manosanta rispetto ad un plugin per diversi motivi :
- non richiede di essere installato, studiato e configurato, un commit e via, per altro su mobile i plugin non sono disponibili
- è più pratico di un bookmarklet, che su mobile risulta scomodo sia nel salvataggio (da fare su ogni dispositivo) che nell’utilizzo
- innocuo, se si ha l’accortezza di racchiudere tutto il codice in un’unica funzione che agisce solo al verificarsi di uno specifico evento, come il click di un apposito pulsante
- si ha il pieno controllo di tutti i campi con la possibilità di gestire anche eccezioni e casistiche particolari.
- quando il form viene cambiato anche lo script che lo compila può essere pushato in parallelo, mantenendo tutti aggiornati senza ulteriori notifiche
Può sembrare una cosa molto piccola ma i benefici di automatizzare in questo modo operazioni quotidiane ripetitive si fanno sentire nel breve e nel lungo periodo evitando al nostro cervello di spegnersi per la noia e permettendoci di impiegare il nostro tempo in attività ben più stimolanti.