Selezionate Inserisci > Spry > Area di testo convalida Spry.
Ultimo aggiornamento il
May 03, 2021 07:34:27 AM GMT
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 Area di testo convalida
Un widget Area di testo convalida Spry è un'area di testo che permette di visualizzare stati validi o non validi quando il visitatore del sito vi inserisce frasi di testo. Se l'area di testo è un campo obbligatorio e l'utente non vi inserisce alcun testo, il widget restituisce un messaggio che segnala che è obbligatorio inserire un valore.
L'esempio che segue mostra un widget Area di testo convalida nei vari stati:
A. Contatore dei caratteri rimanenti B. Widget Area di testo attivo, stato numero massimo di caratteri C. Widget Area di testo attivo, stato valido D. Widget Area di testo attivo, stato obbligatorio E. Contatore dei caratteri inseriti
Il widget Area 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 Area di testo convalida può eseguire la convalida in punti differenti, ad esempio quando l'utente 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 Obbligatorio
Lo stato del widget se l'utente non ha immesso alcun testo.
Stato Numero minimo di caratteri
Lo stato del widget se l'utente ha immesso nell'area 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 nell'area di testo un numero di caratteri maggiore del valore massimo consentito.
Quando un widget Area 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 nell'area di testo, 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 SpryValidationTextArea.css.
Il codice HTML predefinito per il widget Area di testo convalida, solitamente memorizzato all'interno di un modulo, comprende un tag <span> contenitore che racchiude il tag <textarea> dell'area di testo. Il codice HTML del widget Area 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 Area di testo convalida, compresa la spiegazione completa del codice relativo, vedete www.adobe.com/go/learn_dw_sprytextarea_it.
Inserire e modificare il widget Area di testo convalida
Inserire il widget Area di testo convalida
-
-
Impostate la finestra di dialogo Attributi di accessibilità tag Input e fate clic su OK.
Nota:
per inserire un widget Area di testo convalida, potete anche utilizzare la categoria Spry nel pannello Inserisci.
Specificare il momento in cui eseguire la convalida
Potete impostare il momento in cui viene eseguita la convalida, ad esempio quando l'utente fa clic fuori dal widget, mentre digita o quando tenta di inviare il modulo.
-
Selezionate un widget Area di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate l'opzione Convalida per indicare 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
-
Selezionate un widget Area 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 20 nella casella Minimo caratt., il widget esegue la convalida solamente quando l'utente inserisce 20 o più caratteri.
Aggiungere un carattere contatore
Se necessario, potete aggiungere un contatore di caratteri che permetta agli utenti di conoscere il numero di caratteri digitati, oppure quanti caratteri rimangono durante l'immissione di testo nell'area di testo. Per impostazione predefinita, quando aggiungete un contatore di caratteri questo appare fuori dall'angolo in basso a destra del widget.
-
Selezionate un widget Area di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate le opzioni Conteggio caratteri o Caratteri rimanenti.Nota:
l'opzione Caratteri rimanenti è disponibile solamente dopo avere definito il numero massimo di caratteri consentiti.
Visualizzare gli stati dei widget nella vista Progettazione
-
Selezionate un widget Area 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'area di testo
Per impostazione predefinita, quando vengono pubblicati in una pagina Web, tutti i widget Area di testo convalida inseriti mediante Dreamweaver richiedono l'input da parte dell'utente. Tuttavia, potete rendere opzionale la convalida delle aree di testo.
-
Selezionate un widget Area 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'area di testo
All'area di testo potete aggiungere suggerimenti (ad esempio, “Immettere qui la descrizione”) che permettano agli utenti di riconoscere il tipo di informazioni da inserire nell'area. L'area di testo visualizza il testo del suggerimento quando l'utente carica la pagina nel proprio browser.
-
Selezionate un widget Area di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), inserite un suggerimento nella casella di testo Suggerimento.
Bloccare i caratteri in eccesso
Ove necessario, potete impedire agli utenti l'immissione nel widget Area di testo convalida di un numero di caratteri superiore al massimo consentito. Ad esempio, se selezionate questa opzione in un widget impostato per accettare un massimo di 20 caratteri, l'utente non potrà digitare più di 20 caratteri nell'area di testo.
-
Selezionate un widget Area di testo convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate l'opzione Blocca caratteri aggiuntivi.
Personalizzare il widget Area di testo convalida
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Area di testo convalida, essa non supporta le attività relative agli stili personalizzati. Potete variare il CSS del widget Area 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_sprytextarea_custom_it.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationTextArea.css. Quando create un widget Area di testo convalida Spry, Dreamweaver salva il file SpryValidationTextArea.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 Area 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 Area di testo convalida
Per impostazione predefinita, i messaggi di errore relativi al widget Area 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 Area 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à relativa da modificare
Testo del messaggio di errore
.textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
Modificare i colori di sfondo del widget Area di testo convalida
-
Per modificare il colore di sfondo del widget Area 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 di sfondo da modificare
Regola CSS pertinente
Proprietà relativa da modificare
Colore di sfondo del widget in stato valido
.textareaValidState textarea, textarea.textareaValidState background-color: #B8F5B1;
Colore di sfondo del widget in stato non valido
textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea background-color: #FF9F9F;
Colore di sfondo del widget attivo
.textareaFocusState textarea, textarea.textareaFocusState background-color: #FFFFCC;
Altri argomenti correlati
Accedi al tuo account