Yahoo! User Interface Blog (YUIBlog)

Nella Galleria YUI 3: Form Manager di John Lindal

Forme sono state un punto fermo sui siti web per un tempo molto lungo. Nei primi tempi, erano molto semplice: l'utente ha immesso i valori e poi ha aspettato mentre il server ha elaborato i valori o sputare indietro errori. L'ascesa del Web 2.0 ha migliorato significativamente l'esperienza, in particolare pre-validazione sul client. Questo fornisce un feedback immediato ed evita inutili connessioni al server.

Pre-convalida è solo un aspetto delle forme, comunque. L'intero ciclo è:

1. pre-compilare il modulo con i valori di default;
2. pre-convalidare l'ingresso nel browser;
3. presentare i dati del modulo al server in modo sincrono o asincrono;
4. visualizzare i risultati restituiti dal server (buon fine o errori).

In combinazione con YUI 3 IO , il modulo di YUI 3 Galleria Form Manager supporta il ciclo completo. Puoi giocare con la funzionalità lato client qui .

Inizializzazione

Il primo passo, pre-compilazione del modulo con i valori predefiniti, è ovviamente meglio farlo impostando i valori direttamente nel markup, perché funziona anche quando JavaScript è disattivato. Tuttavia, è possibile anche passare una mappa di valori predefiniti, digitato sui nomi degli elementi del modulo, al costruttore Form Manager. Quando si chiama prepareForm() , che unisce i valori predefiniti del DOM con i valori di default passati al costruttore, con il costruttore i valori che ha la precedenza. Il risultato viene salvato in modo da poter ripristinare questi valori chiamando populateForm() . È inoltre possibile modificare le impostazioni predefinite memorizzate: setDefaultValues() e setDefaultValue() , o saveCurrentValuesAsDefault() . (Si noti che questo è diverso da quello nativo del browser reset funzione, dal momento che utilizza solo i valori codificati nel DOM. Form Manager fornisce clearForm() come wrapper per reset .)

Un'altra funzione utile per chiamare durante l'inizializzazione è initFocus() . Questa imposta si concentrano sul primo elemento nel modulo. Se la compilazione del modulo è la ragione principale per visitare la pagina, questo consente di risparmiare all'utente un clic. Ovviamente, se avete più di una forma sulla pagina, si dovrebbe chiamare solo initFocus() per uno di loro.

Pre-convalida

Pre-convalida dell'input utente è un affare complicato . Nella mia esperienza, l'approccio più semplice è meglio: controllare tutto dopo che l'utente dice che ho finito questo modo si evita la necessità di filtrare il flusso di input (KeyUp è facile da prendere, ma pasta è notoriamente difficile, e porta tutto inaspettata. comportamenti caso limite) e, soprattutto, non interrompe il flusso dell'utente. Questo è il motivo Form Manager fornisce una singola funzione per convalidare tutto ciò che nella forma (rullo di tamburi, please): validateForm() .

A differenza di altre soluzioni, Form Manager memorizza la maggior parte della configurazione di convalida nel DOM. Per marcare un campo per la convalida, applicare una o più delle seguenti classi CSS direttamente al campo:

yiv-required

Il valore non deve essere vuoto.

yiv-length:[x,y]

Stringa di caratteri deve essere di almeno x e y maggior parte dei personaggi. Almeno uno di X e Y deve essere specificato.

yiv-integer:[x,y]

Il valore deve essere un numero intero, e il valore deve essere almeno x e al massimo y. x e y sono entrambi opzionali.

yiv-decimal:[x,y]

Il valore deve essere un decimale, e il valore deve essere almeno x e al massimo y. Esponenti non sono ammessi. x e y sono entrambi opzionali.

Ad esempio, se un campo deve essere compilato, e accetta solo tra 6 e 10 caratteri, la classe CSS sarebbe yiv-required yiv-length:[6,10] .

Un bel vantaggio di codifica convalida in classi CSS è che può essere applicato in situazioni correlate, per esempio, quando si modificano i campi creati dinamicamente in una tabella. (Spero di postare un esempio per YUI due DataTable al più presto.) FormManager espone la funzione statica validateFromCSSData() in modo da non dover reinventare la ruota.

Se avete bisogno di usare una espressione regolare per convalidare un campo, registrarsi chiamando setRegex() . Per qualsiasi altra cosa, è possibile associare una funzione ad un campo chiamando setFunction() . Se è necessario eseguire i controlli che comprendono più campi, è possibile ignorare postValidateForm() sull'istanza di Y.FormManager .

Una nota finale: Come suggerisce il nome, pre-convalida non è la convalida reale. JavaScript è relativamente facile da sovvertire (o disattivare completamente), quindi il server non deve mai fidarsi di nulla che riceve dal client. Inoltre, alcuni controlli può avvenire solo sul server, per esempio, tutto ciò che richiede accedere al database.

Errori Visualizzazione

Ovviamente, se uno dei due pre-validazione sul client o sul server di convalida non riesce, allora avete bisogno di informare l'utente, idealmente, mettendo in evidenza i campi che richiedono attenzione. Form Manager supporta questa tramite la funzione displayMessage() .

Questa funzione si aspetta certe classi CSS marker sul DOM surrouning ogni elemento o forma strettamente accoppiati insieme di elementi di un form. Il mio preferito è il layout:

 <div class=" formmgr-row>
   Elemento label ... ...
   <span class=" formmgr-message-text "> </ span>
   ... Elemento form contrassegnati con classe CSS formmgr campo ...
 </ Div>

Questo localizza bene, dal momento che l'etichetta è sopra il campo, e quando un messaggio di errore viene visualizzato, è molto chiaro a quale settore si applica l'errore. Per vederlo in azione, seguite questo link e fare clic sul pulsante Convalida nell'angolo superiore sinistro della pagina.

Ma questa è solo la mia preferenza. È possibile organizzare gli elementi DOM qualsiasi modo si desidera all'interno del contenitore contrassegnato da formmgr-row , finché da qualche parte si trova all'interno di un altro contenitore contrassegnato da formmgr-message-text , e il campo è contrassegnato da solo formmgr-field .

Tipi di messaggio

Un punto importante è che displayMessage() richiede un tipo di messaggio. I tipi supportati sono memorizzati in Y.FormManager.status_order in ordine di precedenza. Il valore predefinito è [ 'error', 'warn', 'success', 'info' ] , ma è possibile modificare questo per soddisfare le vostre esigenze. L'ordine è importante perché, se si chiama displayMessage() con un tipo di precedenza maggiore e il campo è già la visualizzazione di un messaggio con un più basso precedenza, il nuovo messaggio sostituirà il messaggio originale. Allo stesso modo, un messaggio di precedenza inferiore verrà ignorato se un messaggio la precedenza è già visualizzata. Ciò consente di lanciare messaggi in ogni campo con abbandono, con la certezza che gli errori precedenza avvertimenti.

Quando viene visualizzato un messaggio, il contenitore contrassegnato con formmgr-row e il campo contrassegnato con formmgr-field sia ottenere un extra classe CSS: formmgr-has type , dove tipo è il tipo di messaggio. Questo ti permette di stile della, messaggio campo, label, ecc in modo diverso per ogni tipo di messaggio. Inoltre, il fieldset contenente il campo modulo ottiene anche la stessa classe. Questo può essere usato per dirigere l'attenzione dell'utente quando il modulo è grande. (Se diversi campi all'interno di un fieldset hanno diversi tipi di messaggi, il più alto tipo di precedenza è impostato sul fieldset.)

Messaggi

Form Manager include un set predefinito di messaggi di errore per tutte le convalide che possono essere codificati in CSS. Queste stringhe vengono memorizzate in Y.FormManager.Strings , in modo da poter modificare e / o localizzarli.

È inoltre possibile specificare messaggi personalizzati per i singoli campi, chiamando setErrorMessages() .

Notare che non c'è nessun messaggio predefinito per un'espressione validatore regolare, perché tutto generico come il valore non corrisponde al modello richiesto. È del tutto privo di significato per l'utente. Se non si imposta un messaggio per il tipo di regex prima di impostare l'espressione regolare stessa, Form Manager registrerà un errore per ricordare.

Inviare il modulo

Indipendentemente dal fatto che si invia i dati in modo sincrono (via form.submit() ) o asincrono (via Y.io ), probabilmente si desidera disattivare il modulo, mentre i dati vengono elaborati. Form Manager rileva automaticamente tutti i pulsanti all'interno dell'elemento <form>. Se si dispone di pulsanti aggiuntivi altro punto della pagina, è possibile iscriversi chiamando registerButton() . Tutti i pulsanti noti verrà disattivato quando si chiama disableForm() . (Se si utilizza XHR, chiamata enableForm() dopo aver ricevuto la risposta dal server!)

Se si invia il modulo in modo sincrono, allora si servirà nuovamente la stessa pagina se ci sono errori. Al fine di lavorare senza JavaScript, si dovrebbe scrivere gli errori direttamente nel DOM, allo stesso modo Form Manager lo fa.

Se invii tramite XHR, allora sapete che Javascript sia abilitato, in modo da poter utilizzare displayMessage() per evidenziare i valori che il server ha rifiutato. Ovviamente, questo richiede che la risposta dal server includono informazioni dettagliate sull'errore!

Come nota finale, se il modulo è in una sovrapposizione, allora si dovrebbe solo chiudere la sovrapposizione, se la risposta del server con successo, cioè, errori di visualizzazione in sovrapposizione, ma visualizzare un messaggio di successo da qualche parte prominente nella pagina principale.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!