Selezionate Inserisci > Spry > Campo di testo convalida Spry.
Ultimo aggiornamento il
3 mag 2021
Nota:
I widget Spry sono stati sostituiti con i widget jQuery in Dreamweaver CC e versioni successive. Anche se è ancora possibile modificare i widget Spry esistenti in una pagina, non potete aggiungere nuovi widget Spry.
Informazioni sul widget Campo di testo convalida
Un widget Campo di testo convalida Spry è un campo di testo che permette di visualizzare stati validi o non validi quando il visitatore del sito vi inserisce del testo. Ad esempio, potete aggiungere un widget Campo di testo convalida a un modulo in cui i visitatori digitano i propri indirizzi e-mail. Se nell'indirizzo e-mail vengono omessi il simbolo “@” e il punto, il widget restituisce un messaggio che segnala che le informazioni immesse dall'utente non sono valide.
L'esempio che segue mostra un widget Campo di testo convalida nei vari stati:
A. Widget Campo di testo convalida, suggerimento attivato B. Widget Campo di testo convalida, stato valido C. Widget Campo di testo convalida, stato non valido D. Widget Campo di testo convalida, stato obbligatorio
Il widget Campo di testo convalida include alcuni stati, ad esempio valido, non valido, valore richiesto e così via. Le proprietà di questi stati possono essere modificate mediante la finestra di ispezione Proprietà, a seconda dei risultati di convalida desiderati. Un widget Campo di testo convalida può eseguire la convalida in punti differenti, ad esempio quando il visitatore fa clic fuori dal widget, mentre digita o quando tenta di inviare il modulo.
Stato iniziale
Lo stato del widget quando la pagina viene caricata nel browser, oppure quando l'utente ripristina il modulo.
Stato attivo
Lo stato del widget quando l'utente porta il punto di inserimento all'interno del widget.
Stato valido
Lo stato del widget se l'utente ha immesso informazioni corrette e il modulo può essere inviato.
Stato non valido
Lo stato del widget se l'utente ha immesso testo in un formato non valido (ad esempio, 06 per l'anno invece di 2006).
Stato Obbligatorio
Lo stato del widget se l'utente non ha immesso il testo richiesto nel campo di testo.
Stato Numero minimo di caratteri
Lo stato del widget se l'utente ha immesso nel campo di testo un numero di caratteri minore del valore minimo richiesto.
Stato Numero massimo di caratteri
Lo stato del widget se l'utente ha immesso nel campo di testo un numero di caratteri maggiore del valore massimo consentito.
Stato Valore minimo
Lo stato del widget se l'utente ha immesso un valore minore di quello richiesto dal campo di testo. Ha effetto su numeri interi, numeri reali e convalida di tipi di dati.
Stato Valore massimo
Lo stato del widget se l'utente ha immesso un valore maggiore di quello massimo consentito dal campo di testo. Ha effetto su numeri interi, numeri reali e convalida di tipi di dati.
Quando un widget Campo di testo convalida assume uno di questi stati a causa dell'interazione con l'utente, durante la fase di runtime la logica del framework Spry applica una specifica classe CSS al contenitore HTML per il widget. Ad esempio, se l'utente tenta di inviare un modulo in cui non ha immesso alcun testo in un campo di testo obbligatorio, Spry applica una classe al widget che provoca la visualizzazione del messaggio di errore “Il valore è obbligatorio”. Le regole che controllano gli stati di stile e visualizzazione dei messaggi di errore si trovano nel file CSS associato al widget, chiamato SpryValidationTextField.css.
Il codice HTML predefinito per il widget Campo di testo convalida, solitamente memorizzato all'interno di un modulo, comprende un tag <span> contenitore che racchiude il tag <input> del campo di testo. Il codice HTML del widget Campo di testo convalida include anche i tag script nella sezione head del documento e dopo i tag HTML del widget.
Per una descrizione più dettagliata del funzionamento del widget Campo di testo convalida, compresa la spiegazione completa del codice relativo, vedete www.adobe.com/go/learn_dw_sprytextfield_it.
Inserire e modificare il widget Campo di testo convalida
Inserire il widget Campo di testo convalida
-
-
Impostate la finestra di dialogo Attributi di accessibilità tag Input e fate clic su OK.
Nota:
per inserire un widget Campo di testo convalida, potete anche utilizzare la categoria Spry nel pannello Inserisci.
Impostare un tipo di convalida e il formato
Per il widget Campo di testo convalida potete specificare differenti tipi di convalida. Ad esempio, se il campo di testo dovrà ricevere numeri di carta di credito, potete specificare l'apposito tipo di convalida.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate un tipo di convalida dal menu Tipo.
-
Se necessario, selezionate un formato dal menu a comparsa Formato.
La maggior parte dei tipi di convalida fanno in modo che il campo di testo preveda l'immissione di dati in un formato standard. Ad esempio, se applicate il tipo di convalida per i numeri interi a un campo di testo, il widget esegue la convalida solamente quando l'utente inserisce numeri nel campo. Tuttavia, alcuni tipi di convalida permettono di scegliere il tipo di formato che il campo di testo deve accettare. La tabella che segue elenca i tipi di convalida e i formati disponibili tramite finestra di ispezione Proprietà:
Tipo di convalida |
Formato |
|---|---|
Nessuno |
Non è richiesto nessun formato particolare. |
Intero |
Il campo di testo accetta solamente i numeri. |
Indirizzo e-mail |
Il campo di testo accetta indirizzi e-mail contenenti un simbolo @ e un punto (.) preceduto e seguito da almeno una lettera. |
Data |
Sono disponibili più formati differenti. Selezionate il formato desiderato dal menu a comparsa Formato della finestra di ispezione Proprietà. |
Ora |
Sono disponibili più formati differenti. Selezionate il formato desiderato dal menu a comparsa Formato della finestra di ispezione Proprietà. “tt” indica il formato am/pm; “t” indica il formato a/p. |
Carta di credito |
Sono disponibili più formati differenti. Selezionate il formato desiderato dal menu a comparsa Formato della finestra di ispezione Proprietà. Potete scegliere se accettare tutte le carte di credito, oppure specificare un tipo particolare, ad esempio MasterCard, Visa, ecc. Il campo di testo non accetta spazi all'interno del numero di carta di credito, ad esempio 4321 3456 4567 4567. |
CAP |
Sono disponibili più formati differenti. Selezionate il formato desiderato dal menu a comparsa Formato della finestra di ispezione Proprietà. |
Numero telefonico |
Il campo di testo accetta numeri telefonici in formato per Stati Uniti e Canada (000) 000-0000, oppure formati personalizzati. Selezionando un formato personalizzato come opzione, inserite il formato desiderato (ad esempio 000.00(00)) nella casella di testo Modello. |
Numero di previdenza sociale |
Il campo di testo accetta numeri di previdenza sociale in formato 000-00-0000. Se desiderate utilizzare un formato diverso, selezionate Personalizzato come tipo di convalida e specificate un modello. Il meccanismo di convalida dei modelli accetta solo i caratteri ASCII. |
Valuta |
Il campo di testo accetta valori in formato 1.000.000,00 o 1,000,000.00. |
Numero reale/Notazione scientifica |
Esegue la convalida di vari tipi di numeri: interi (ad esempio 1), decimali (ad esempio 12,123) e decimali con notazione scientifica (ad esempio 1,212e+12, 1,221e-12, dove e è usato per esprimere una potenza di 10). |
Indirizzo IP |
Sono disponibili più formati differenti. Selezionate il formato desiderato dal menu a comparsa Formato della finestra di ispezione Proprietà. |
URL |
Il campo di testo accetta URL in formato http://xxx.xxx.xxx o ftp://xxx.xxx.xxx. |
Personalizzato |
Consente di impostare un tipo di convalida e del formato. Inserite il modello del formato (e un suggerimento, se lo desiderate) nella finestra di ispezione Proprietà. Il meccanismo di convalida dei modelli accetta solo i caratteri ASCII. |
Specificare il momento in cui eseguire la convalida
Potete impostare il momento in cui viene eseguita la convalida, ad esempio quando il visitatore del sito fa clic fuori dal widget, mentre digita o quando tenta di inviare il modulo.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate l'opzione che indica quando desiderate che sia eseguita la convalida. Potete selezionare tutte le opzioni, oppure soltanto Invio.
Sfocatura
Esegue la convalida non appena l'utente fa clic fuori dal campo di testo.
Cambia
Esegue la convalida quando l'utente modifica il testo all'interno del campo di testo.
Invio
Esegue la convalida quando l'utente tenta di inviare il modulo. L'opzione Invio è selezionata per impostazione predefinita.
Specificare un numero minimo e massimo di caratteri
Questa opzione è disponibile solamente per i tipi di convalida Nessuno, Numero intero, Indirizzo e-mail e URL.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), inserite un numero nella casella Minimo caratt. o Massimo caratt. Ad esempio, se inserite 3 nella casella Minimo caratt., il widget esegue la convalida solamente quando l'utente inserisce tre o più caratteri.
Specificare i valori minimi e massimi
Questa opzione è disponibile solamente per i tipi di convalida Numero intero, Ora, Valuta e Numero reale/Notazione scientifica.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), inserite un numero nella casella Valore minimo o Valore massimo. Ad esempio, se inserite 3 nella casella Valore minimo, il widget esegue la convalida solamente quando l'utente inserisce nel campo di testo il numero 3 o un valore maggiore (4, 5, 6 e così via).
Visualizzare gli stati dei widget nella vista Progettazione
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate lo stato che desiderate vedere dal menu a comparsa Stati di anteprima. Ad esempio, selezionate Valido per vedere il widget nel suo stato valido.
Modificare lo stato obbligatorio di un campo di testo
Per impostazione predefinita, quando vengono pubblicati in una pagina Web, tutti i widget Campo di testo convalida inseriti mediante Dreamweaver richiedono l'input da parte dell'utente. Tuttavia, potete rendere opzionale il completamento dei campi di testo da parte dell'utente.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate o deselezionate l'opzione Obbligatorio come desiderato.
Creare un suggerimento per un campo di testo
Dato che vi sono molti tipi differenti di formati per i campi di testo, spesso è utile fornire all'utente dei suggerimenti in merito al formato da inserire. Ad esempio, un campo di testo per cui è stato impostato il tipo di convalida Numero telefonico accetta soltanto numeri telefonici in formato (000) 000-0000. Questo valore di esempio può essere fornito come suggerimento, affinché il campo di testo mostri il formato corretto quando la pagina viene caricata nel browser dell'utente.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), inserite un suggerimento nella casella di testo Suggerimento.
Blocco dei caratteri non validi
Potete impedire agli utenti di inserire caratteri non validi in un widget Campo di testo convalida. Ad esempio, se selezionate questa opzione per un widget impostato per eseguire il tipo di convalida Numero intero, se l'utente tenta di digitare un carattere alfabetico nel campo di testo non appare nulla.
-
Selezionate un widget Campo di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate l'opzione Forza schema.
Personalizzare il widget Campo di testo convalida
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Campo di testo convalida, essa non supporta le attività relative agli stili personalizzati. Potete variare il CSS del widget Campo di testo convalida in modo da creare un widget con lo stile che preferite. Per un elenco più dettagliato delle attività relative agli stili, vedete www.adobe.com/go/learn_dw_sprytextfield_custom_it.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationTextField.css. Quando create un widget Campo di testo convalida Spry, Dreamweaver salva il file SpryValidationTextField.css nella cartella SpryAssets del sito. Le informazioni contenute nel file sono utili poiché contengono commenti sui vari stili che possono essere applicati al widget.
Nota:
Nonostante sia possibile modificare facilmente le regole del widget Campo di testo convalida direttamente nel file CSS associato, per modificare il CSS del widget potete anche utilizzare il pannello Stili CSS. Il pannello Stili CSS è utile per localizzare le classi CSS assegnate a parti differenti del widget, in particolar modo quando si utilizza la modalità Corrente del pannello.
Formattare il testo dei messaggi di errore del widget Campo di testo convalida
Per impostazione predefinita, i messaggi di errore relativi al widget Campo di testo convalida vengono visualizzati in rosso, con un bordo di un pixel attorno al testo.
-
Per modificare lo stile del testo dei messaggi di errore di un widget Campo di testo convalida, utilizzate la seguente tabella per individuare la regola CSS appropriata e quindi modificate le proprietà predefinite o aggiungete proprietà e valori dello stile di testo desiderato:
Testo da modificare
Regola CSS pertinente
Proprietà relative da modificare
Testo del messaggio di errore
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Modificare i colori di sfondo del widget Campo di testo convalida
-
Per modificare il colore di sfondo del widget Campo di testo convalida in vari stati, utilizzate la tabella che segue per localizzare la regola CSS appropriata, quindi modificate i valori dei colori di sfondo predefiniti:
Colore da modificare
Regola CSS pertinente
Proprietà relativa da modificare
Colore di sfondo del widget in stato valido
.textfieldValidState input, input.textfieldValidState background-color: #B8F5B1;
Colore di sfondo del widget in stato non valido
input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input background-color: #FF9F9F;
Colore di sfondo del widget attivo
.textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
