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:

Widget Campo di testo convalida
Widget Campo di testo convalida

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

  1. Selezionate Inserisci > Spry > Campo di testo convalida Spry.
  2. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate un tipo di convalida dal menu Tipo.
  3. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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.

  1. Selezionate un widget Campo di testo convalida nella finestra del documento.
  2. 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.

  1. 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

  1. 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;

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online