Selezionate Inserisci > Spry > Selezione convalida Spry.
Ultimo aggiornamento il
2021-05-03
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 Selezione convalida
Il widget Selezione convalida Spry è un menu a discesa che visualizza gli stati validi o non validi rilevati quando l'utente prende una decisione. Ad esempio, potete inserire un widget Selezione convalida contenente un elenco di stati raggruppati in sezioni differenti e divisi in righe orizzontali. Quando l'utente seleziona accidentalmente una delle linee divisorie invece che uno degli stati, il widget Selezione convalida restituisce un messaggio in cui indica all'utente che la selezione effettuata non è valida
L'esempio che segue mostra un widget Selezione convalida nei vari stati e nelle sue forme espansa e compressa:
A. Widget selezione convalida attivo B. Widget selezione convalida, stato valido C. Widget selezione convalida, stato obbligatorio D. Widget selezione convalida, stato non valido
Il widget Selezione 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 Selezione convalida può eseguire la convalida in punti differenti, ad esempio quando l'utente fa clic fuori del widget, effettua una selezione o 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 fa clic su di esso.
Stato valido
Lo stato del widget se l'utente ha selezionato una voce valida e il modulo può essere inviato.
Stato non valido
Lo stato del widget se l'utente ha selezionato una voce non valida.
Stato Obbligatorio
Lo stato del widget se l'utente non ha selezionato alcuna voce valida.
Quando un widget Selezione 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 selezionato alcuna voce di menu, Spry applica una classe al widget che provoca la visualizzazione del messaggio di errore “Selezionare una voce”. Le regole che controllano gli stati di stile e visualizzazione dei messaggi di errore si trovano nel file CSS associato al widget, chiamato SpryValidationSelect.css.
Il codice HTML predefinito per il widget Selezione convalida, solitamente memorizzato all'interno di un modulo, comprende un tag <span> contenitore che racchiude il tag <select> del menu a discesa. Il codice HTML del widget Selezione 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 Selezione convalida, compresa la spiegazione completa del codice relativo, vedete www.adobe.com/go/learn_dw_spryselect_it.
Inserire e modificare il widget Selezione convalida
Inserire il widget Selezione convalida
-
-
Impostate la finestra di dialogo Attributi di accessibilità tag Input e fate clic su OK.
-
Nella vista Codice, aggiungete tag option contenenti voci di menu e valori. Dreamweaver non può eseguire automaticamente questa operazione. Per ulteriori informazioni, vedete gli argomenti precedenti.
Nota:
per inserire un widget Selezione 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 Selezione 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 widget.
Cambia
Esegue la convalida quando l'utente effettua le selezioni.
Invio
Esegue la convalida quando l'utente tenta di inviare il modulo. L'opzione Invio è selezionata per impostazione predefinita.
Visualizzare gli stati dei widget nella vista Progettazione
-
Selezionate un widget Selezione 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.
Consentire o proibire l'uso di valori vuoti
Per impostazione predefinita, quando vengono pubblicati in una pagina Web, tutti i widget Selezione convalida inseriti mediante Dreamweaver richiedono che l'utente selezioni voci di menu a cui sia associato un valore. Tuttavia, potete disattivare questa opzione.
-
Selezionate un widget Selezione convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate o deselezionate l'opzione Non consentire valori vuoti come desiderato.
Definire un valore non valido
Potete specificare i valori da considerare non validi qualora l'utente selezioni una voce di menu associata a essi. Ad esempio, se si specifica -1 come stato non valido e si assegna quel valore a un tag di opzione, il widget restituirà un messaggio di errore se l'utente seleziona quell'elemento del menu.
<option value="-1"> ------------------- </option>
-
Selezionate un widget Selezione convalida nella finestra del documento.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), inserite un numero da utilizzare come valore non valido nella casella Valore non valido.
Personalizzare il widget Selezione convalida
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Selezione convalida, essa non supporta le attività relative agli stili personalizzati. Potete variare il CSS del widget Selezione convalida in modo da creare un widget con lo stile che preferite.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationSelect.css. Quando create un widget Selezione convalida Spry, Dreamweaver salva il file SpryValidationSelect.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 Selezione 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 Selezione convalida
Per impostazione predefinita, i messaggi di errore relativi al widget Selezione 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 Selezione convalida, utilizzate la seguente tabella per localizzare la regola CSS appropriata, quindi modificate le proprietà predefinite o aggiungete proprietà e valori dello stile di testo desiderato:
Testo a cui assegnare uno stile
Regola CSS pertinente
Proprietà relative da modificare
Testo del messaggio di errore
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Modificare i colori di sfondo del widget Selezione convalida
-
Per modificare il colore di sfondo del widget Selezione 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
.selectValidState select, select.selectValidState background-color: #B8F5B1;
Colore di sfondo del widget in stato non valido
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
Colore di sfondo del widget attivo
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
Altri argomenti correlati
Accedi al tuo account