Gestire i Form con Javascript
Accetta le condizioni
Questo script impone all'utente di accettare le condizioni di fornitura del servizio prima di poter inviare il modulo. E' un esempio molto utile per form che prevedono l'iscrizione a servizi o l'acquisto di merci.
Auto Form Value
Un semplice script il cui compito è quello di ripulire automaticamente il valore predefinito relativo ad un campo di testo, inoltre è in grado di ripristinare un valore nel caso in cui un campo venga lasciato vuoto; per eliminare un valore di default basterà un click del mouse, per ripristinarlo basterà lasciare vuoto e passare al campo successivo.
AutoCompleter
Un plugin per Mootools che mette a disposizione in tempo reale funzionalità per l'autocompletamento dei campi di input dei form tramite suggerimenti; l'estensione supporta numerose sorgenti per i dati tra cui anche semplici file di testo, JSON e XML.
Bottoni con scritta scorrevole
Questo esempio mostra come è possibile inserire del testo scorrevole all'interno di un comune bottone.
Conta caratteeri nella Textarea
Uno script in grado di contare i caratteri digitati all'interno di una textarea, l'applicazione è composta da poche righe di codice e funziona sulla base di un semplice ciclo che intercetta e conta tutti i caratteri contenuti all'interno del campo form compilato.
Conta caratteri rimanenti
Un bello script utile per contare il numero di caratteri digitati all'interno di un campo testo o di una textarea. Il numero di caratteri ancora disponibili viene stampato a video ed aggiornato in tempo reale.
Contare parole e caratteri in una textarea
Questo esempio mostra come è possibile implementare un semplice controllo per contare il numero di parole e/o di caratteri scritti all'interno di una textarea. Utile se si vuole limitare l'inserimento di testo ad una quantità predefinità di parole e/o di caratteri.
Custom Form Elements
Grazie a questo script e a qualche riga di CSS è possibile customizzare l'aspetto di alcuni elementi dei form come select list, checkboxes e radio buttons. Il risultato è visivamente molto gradevole.
FancyForm
Una soluzione completa per la creazione di form da inserire all'interno delle pagine dei siti Web; estremamente semplice da installare e da personalizzare, questa applicazione supporta la retrocompatibilità anche con i browser Internet più datati.
Form field progress bar
Uno script molto utile per il controllo dei form durante la compilazione da parte degli utenti; l'applicazione permette di definire il massimo numero di caratteri per un campo di input (ad esempio una textarea) e di mostrare una progress bar con il numero di caratteri ancora disponibili.
FormCheck - Form validation class
Un plugin per Mootools che consente di creare dei form a cui aggiungere delle funzionalità per la validazione degli input in tempo reale; facile da integrare ad un modulo form preesistente e altamente personalizzabile, l'estensione supporta il riconoscimento dei più utilizzati tipi di dato.
E' disponibile una demo a questa pagina.Foul
Foul è un'applicazione realizzata in JavaScript che permette di validare i campi di input di un forma, lo script permette di controllare diverse tipologie di dati: numeri di telefono, numeri di carte di credito, numeri di assistenza sociale, date, intevalli di tempo, estensioni di file e molto altro.
h5Validate
h5Validate è un plugin per il framework JavaScript jQuery che fornisce funzionalità avanzate per la validazione di moduli scritti in HTML5; compatibile con la maggior parte dei browser più diffusi, permette anche l'implementazione inline.
E' disponibile una demo a questa pagina.Impedire il submit col tasto Enter
Un semplice script che consente di impedire il submit di un form alla semplice pressione del tasto enter all'interno di un campo input di testo.
Impostare un limite alla selezione di checkbox
Questo interessante esempio di javascript mostra come è possibile limitare il numero di checkbox selezionabili all'interno di un form. Per fare un esempio potremo invitare i nostri utenti ad indicarci i loro hobby scegliendo tra 10 differenti con il vincolo di poterne scegliere al massimo 3.
jFormer
jFormer è un framework per la generazione di form basato su jQuery; nelle librerie sono presenti anche i necessari codici server side (in PHP) per la validazione lato server degli input dei form, per quanto riguarda la validazione client side questa è messa a disposizione nativamente dal framework.
E' disponibile una demo a questa pagina.jQuery File Style
Un plugin per jQuery che permette di definire degli stili da associare al tasto "Sfoglia" per l'upload di file tramite form, il tutto attraverso delle istruzioni contenute in un comune foglio di stile CSS.
E' disponibile una demo a questa pagina.Jquery Validation with Regular Expressions
Semplice script basato sul framework jQuery e PHP che permette di validare gli input provenienti da un form per il feedback filtrando diverse tipologie di dati (stringhe, email etc.) tramite le espressioni regolari; tutti i controlli vengono effettuati in tempo reale.
E' disponibile una demo a questa pagina.jQuery.validVal
Un plugin per jQuery che permette di rendere più semplici i processi di validazione dei moduli form on line; lo script è in grado, tramite espressioni regolari, di intercettare i formati non corretti utilizzati per email, url, date, numeri e molto altro.
LiveValidation
LiveValidation è una suite completa per la validazione dei form in Javascript. Completamente cross-browser questa libreria consenti di validare dinamicamente diverse tipologie di dati mediante numerose verifiche predefinite (verifica che un campo nuon sia vuoto, verifica campi numerici, validazione indirizzi email, veriica della lunghezza di un campo, ecc.).
Masked Input Plugin
Un jQuery plugin per la validazione che mette a disposizione numerosi strumenti per filtrare gli input provenienti dai form; l'estensione permette di semplificare l'utilizzo delle espressioni regolari grazie ad un sistema di simboli in grado di rappresentarle in modo più semplice ed intuitivo.
Namely
Namely è un semplice plugin per jQuery che consente di standardizzare i dati provenienti dagli input degli utenti. Questo plugin è stato pensato soprattutto per i campi il cui l'utente deve inserire un nome e cognome i quali verranno automaticamente trasformati in minuscolo con la prima lettera maiuscola.
E' disponibile una demo a questa pagina.Non inviare due volte!
Un utile esempio di Javascript che mostra come implementare nei nostri form una semplice funzione che inibisca il doppio invio dei moduli
Ricorda i dati nel form
Questo script permette di memorizzare i dati inseriti all'interno dei campi di input di un Web form; se il form viene ricaricato, quindi, apparirà già popolato con i campi compilati in precedenza. Per far questo l'applicazione sfrutta la creazione dei cookies, quindi se questi sono stati disabilitati tramite il browser non sarà possibile utilizzarla.
Rimuovi tag HTML
Questo script permette di aumentare il livello di sicurezza dei moduli online; grazie a questa applicazione sarà possibile impedire agli utenti di inserire tags HTML all'interno di messaggi, discussioni in forum e post nei blog.
Scegli la nazione!
Un simpatico script che implementa, all'interno di un form, dei menu a tendina dinamici per l'inserimento della nazione (prima si sceglie il continente e poi apparirà il giusto menu a tendina con l'elenco delle nazioni tra cui poter effettuare una scelta).
Select multiple con i checkbox
Questo javascript trasforma una comune selectbox a scelta multipla in un accattivante box con voci multiple selezionabili mediante checkbox.
Seleziona tutto
Un semplice script per consentire agli utenti di selezionare tutto il testo presente in una textarea... con un semplice click!
Sistema di validazione dei form
Un semplice classe Javascript che fornisce un sistema completo per la validazione dei dati inseriti in un form; nel caso in cui un parametro non sia valido verrà lanciato un alert come notifica all'utilizzatore.
Slide Bar
Un bellissimo esempio di come implementare una slide-bar all'interno di un form. Utilissima e molto intuitiva nella raccolta di dati di tipo proporzionale. Questo script fornisce un'ottima soluzione, ad esempio, per domande che ammettono più di una risposta e tra queste si vuole consentire di esprimere una valutazione comparativa.
