Nwlapcug.com


Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver

Dreamweaver CS3 viene fornito con alcuni widget di convalida Spry per le forme. In questo articolo imparerete come convalidare un campo di testo e personalizzare i messaggi di errore Spry.

Istruzioni

1Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Se hai già un campo di testo del modulo sulla tua pagina, selezionarla e fare clic sul pulsante Spry per campi di testo. Se non avete ancora un campo di testo, fare clic sul pulsante Spry per campi di testo e uno verrà inserito.

2Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Si aprirà la finestra di dialogo accesso facilitato. Compilare le informazioni qui per l'ID di elemento di modulo e l'etichetta. Fare clic su OK. Se non hai ancora aggiunto un elemento form alla tua pagina, Dreamweaver offre di farlo per voi.

3Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Dreamweaver ti avvisa dei file dipendenti che verranno aggiunti al tuo sito per rendere il widget Spry lavoro. Fare clic su OK.

4Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


È possibile rinominare il modulo "widget" utilizzando la finestra di ispezione Proprietà anziché utilizzare il nome generico come sprytextfield1. Dreamweaver aggiunge il nome del widget con un elemento span avvolto intorno all'elemento form. Forse dovrebbe andarsene "spry" nel nome se si decide di modificarlo. In questo modo esso non sia in conflitto con l'ID e l'etichetta che hai scelto. L'esempio nella foto è per un campo di testo nome, quindi ho rinominato il widget in spry_fname. Si noti che la casella di controllo richiesto automaticamente è selezionata nella finestra di ispezione Proprietà. L'immagine è un'immagine combinata mostrando ciò che Dreamweaver ha nella vista codice e Progettazione vista a questo punto.

5Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Quando stato anteprima "Necessaria" è selezionato nella finestra di ispezione Proprietà, viene visualizzato il messaggio di errore in visualizzazione struttura. L'utente potrebbe non vedere questo nel browser a meno che non c'era un errore nella convalida del campo. Questo può essere personalizzato digitando un nuovo messaggio nella finestra del documento. Si dovrebbe anche controllare nel menu stato anteprima finestra di ispezione Proprietà, perché per alcuni widget (non questo uno) il controllo di anteprima dello stato è una buona abitudine di forma poiché il messaggio di errore può cambiare a seconda delle circostanze. Nell'esempio illustrato il messaggio di errore è ciò che si vedrebbe se il modulo sono stato presentato con il campo nome vuoto. Se non volete vedere il messaggio di errore in visualizzazione struttura, quindi selezionare lo stato di anteprima "Iniziale."

6Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Decidere quando convalidare è fatto utilizzando la finestra di ispezione Proprietà. Per un campo di testo richiesto chiedendo un nome, la scelta migliore è la convalida su Invia. Tuttavia, ci sono un numero di opzioni nel menu tipo nella finestra di ispezione Proprietà. Se avete selezionato l'indirizzo di posta elettronica dal menu tipo, è preferibile farlo convalidare onBlur. Se il campo di testo non contiene un indirizzo di posta elettronica un messaggio di errore come "Inserisci un indirizzo email valido" pop-up dal momento che l'utente ha spostato il campo modulo successivo. Convalida il cambiamento sarebbe un po' irritante per gli utenti per un campo di testo, poiché ogni battitura è un cambiamento, quindi un messaggio di errore sembrerebbe il momento che qualcuno iniziato a digitare nel campo di testo.

7

È possibile impostare limiti sul numero di caratteri consentiti nel campo di testo con finestra di ispezione Proprietà. È inoltre possibile inserire un "suggerimento" che apparirà nel campo di testo prima che la persona comincia a digitare. Nell'esempio di campo di nome un suggerimento come "Digitare il proprio nome" potrebbe essere utilizzato, tuttavia, con un corretto uso dell'elemento etichetta che è impostare nella finestra di dialogo accessibilità all'inizio, un suggerimento non è necessario.

8Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Utilizzare la finestra di ispezione Proprietà per decidere il tipo di convalida. Per esempio qui, chiedendo per nome, rendendo il campo richiesto e impostando il tipo su nessuno sarebbero adeguati. Tuttavia, esistono 14 tipi di convalide possibili con campi di testo. Nessuno è l'impostazione predefinita. Valore integer verifica per un numero intero. Email si presenta per un indirizzo di email correttamente formattato come [email protected]. Può essere formattato in diversi modi, come può il tempo. Utilizzare il menu di formato di ispezione Proprietà per impostare il formato per data o ora. Carta di credito sembra per un tipo di carta e un formato per l'immissione della data (impostare questo con le opzioni di formato). Codice postale può essere impostata a cercare 5 o 9 cifre. Numero di telefono è in grado di convalidare solo numeri statunitensi o canadesi. Numero di previdenza sociale cerca di tre numeri, un trattino, due numeri, un trattino e tre numeri. Valuta possa convalidare per formattazione americano o europeo. Numero reale permette numeri decimali. Indirizzo IP cerca un numero formattato come un numero di IP. URI può essere impostato per includere il protocollo, ad esempio http://. Infine, è possibile personalizzare un test di convalida in vari modi per cercare degli schemi o varie combinazioni di numeri o lettere minuscole e.

9Come convalidare un campo di testo con i widget Spry modulo di Dreamweaver


Lo stile predefinito del messaggio di errore è rosso con un contorno rosso. Si può cambiare. Cerca in pannello Stili CSS per il selettore di stile che inizia .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState e continua ad andare con una virgola separati elenco dei selettori. È possibile modificare questo nel modo consueto in Dreamweaver CSS stile finestra di dialogo di modifica.

Consigli & Avvertenze

  • Poiché i messaggi di errore vengono inseriti con un tag span, l'errore appare in linea subito dopo l'elemento di modulo quando necessario. Se si desidera che il messaggio di errore sulla propria riga si può modificare l'intervallo a un p o div..--basta essere sicuri di mantenere intatto il nome della classe.