Selezionate Inserisci > Spry > Gruppo pulsanti di scelta convalida Spry.
Ultimo aggiornamento il
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 Gruppo pulsanti di scelta convalida
Il widget Gruppo pulsanti di scelta convalida è un gruppo di pulsanti di scelta con supporto di convalida per la selezione. Il widget impone la selezione di un pulsante di scelta contenuto nel gruppo.
L'esempio che segue mostra un widget Gruppo pulsanti di scelta convalida nei vari stati.
A. Messaggi di errore del widget Gruppo pulsanti di scelta convalida B. Gruppo di widget Gruppo pulsanti di scelta convalida
Il widget Gruppo pulsanti di scelta convalida include tre stati oltre a quello iniziale: valido, non valido e valore obbligatorio. Potete modificare le proprietà di questi stati intervenendo sul file CSS corrispondente (SpryValidationRadio.css), a seconda dei risultati di convalida desiderati. Un widget Gruppo pulsanti di scelta convalida può eseguire la convalida in punti differenti: quando l'utente fa clic fuori dal widget, effettua le selezioni o tenta di inviare il modulo.
Stato iniziale
Quando la pagina viene caricata nel browser oppure quando l'utente ripristina il modulo.
Stato valido
Quando l'utente ha effettuato una selezione e il modulo può essere inviato.
Stato Obbligatorio
Quando l'utente non ha effettuato la selezione richiesta.
Stato non valido
Quando l'utente seleziona un pulsante di scelta il cui valore non è accettabile.
Quando un widget Gruppo pulsanti di scelta 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 effettua alcuna selezione, Spry applica una classe al widget che provoca la visualizzazione del messaggio di errore "Effettuare una selezione". Le regole che controllano gli stati di stile e visualizzazione dei messaggi di errore si trovano nel file associato al widget, chiamato SpryValidationRadio.css.
Il codice HTML predefinito per il widget Gruppo pulsanti di scelta convalida, solitamente memorizzato all'interno di un modulo, è costituito da un tag spancontenitore che racchiude il tag input type="radio" del gruppo pulsanti di scelta. Il codice HTML del widget Gruppo pulsanti di scelta convalida include anche i tag script nella sezione head del documento e dopo il codice HTML del widget.
Per una descrizione più dettagliata del funzionamento del widget Gruppo pulsanti di scelta convalida, compresa la spiegazione completa del codice relativo, fate riferimento a www.adobe.com/go/learn_dw_spryradio_it.
Inserire e modificare il widget Gruppo pulsanti di scelta convalida
Inserire il widget Gruppo pulsanti di scelta convalida
-
-
Nella casella di testo Nome, inserite un nome per il gruppo di pulsanti di scelta.
-
Aggiungete o rimuovete i pulsanti di scelta dal gruppo facendo clic sul pulsante più (+) o meno (-).
-
Nella colonna Etichetta, fate clic sul nome di ogni pulsante di scelta per rendere modificabile il campo e assegnate a ognuno nomi univoci.
-
Nella colonna Valore, fate clic su ogni valore per rendere modificabile il campo e assegnate a ogni pulsante di scelta un valore univoco.
-
(Opzionale) Fate clic su un pulsante di scelta o sul relativo valore per selezionare una riga specifica, quindi fate clic sulle frecce rivolte in alto o in basso per spostare la riga in alto o in basso.
-
Selezionate un tipo di layout per il gruppo di pulsanti di scelta.
Interruzioni di riga
Inserite ogni pulsante di scelta su una riga separata utilizzando interruzioni di riga (tag br).
Tabella
Inserite ogni pulsante di scelta su una riga separata utilizzando singole righe di tabella (tag tr).
-
Fate clic su OK.
Nota:
per inserire un widget Gruppo pulsanti di scelta, 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 effettua le proprie selezioni o quando tenta di inviare il modulo.
-
Selezionate un widget Gruppo pulsanti di scelta nella finestra del documento facendo clic sulla relativa linguetta blu.
-
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 gruppo di pulsanti di scelta.
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 Gruppo pulsanti di scelta nella finestra del documento facendo clic sulla relativa linguetta blu.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate lo stato che desiderate vedere dal menu a comparsa Stati di anteprima. Selezionate ad esempio Iniziale per vedere il widget nel suo stato iniziale.
Modificare lo stato obbligatorio dei pulsanti di scelta
Per impostazione predefinita, i widget Gruppo pulsanti di scelta convalida richiedono all'utente di effettuare una seleziona prima di inviare il modulo. Tuttavia, potete rendere opzionale la selezione da parte dell'utente.
-
Selezionate un widget Gruppo pulsanti di scelta nella finestra del documento facendo clic sulla relativa linguetta blu.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), deselezionate l'opzione Obbligatorio.
Specificare un valore vuoto o non valido
Potete specificare i valori da considerare vuoti o non validi se l'utente seleziona un pulsante di scelta associato a uno di essi. Se l'utente seleziona un pulsante di scelta con un valore vuoto, il browser restituisce il messaggio di errore “Effettuare una selezione”. Se l'utente seleziona un pulsante di scelta con un valore non valido, il browser restituisce il messaggio di errore “Selezionare un valore valido”.
-
Selezionate il pulsante di scelta nel widget Gruppo pulsanti di scelta che desiderate utilizzare per il pulsante di scelta vuoto o non valido. Quando specificate valori vuoti o non validi per il widget, è necessario che siano già assegnati pulsanti di scelta corrispondenti con tali valori.
-
Nella finestra di ispezione Proprietà del pulsante di scelta (Finestra > Proprietà), assegnate al pulsante di scelta un valore selezionato. Per creare un pulsante di scelta con un valore vuoto, digitate none nella casella di testo Valore selezionato. Per creare un pulsante di scelta con un valore non valido, digitate invalid nella casella di testo Valore selezionato.
-
Selezionate l'intero widget Gruppo pulsanti di scelta facendo clic sulla relativa linguetta blu.
-
Nella finestra di ispezione Proprietà, specificate i valori vuoti o non validi. Per creare un widget che visualizzi il messaggio di errore relativo al valore vuoto “Effettuare una selezione”, digitate none nella casella di testo Valore vuoto. Per creare un widget che visualizzi il messaggio di errore relativo al valore non valido “Selezionare un valore valido”, digitate invalid nella casella di testo Valore non valido.
Per la corretta visualizzazione dei messaggi di errore, tenete presente che i valori none o invalid devono essere assegnati sia al pulsante di scelta che al widget Gruppo pulsanti di scelta.
Personalizzare il widget Gruppo pulsanti di scelta
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Gruppo pulsanti di scelta convalida, non supporta le attività relative agli stili personalizzati. Potete variare il CSS del widget Gruppo pulsanti di scelta convalida in modo da creare un widget con lo stile desiderato. Per un elenco più dettagliato delle operazioni di personalizzazione, fate riferimento a www.adobe.com/go/learn_dw_spryradio_custom_it.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationRadio.css. Quando create un widget Gruppo pulsanti di scelta convalida Spry, Dreamweaver salva il file SpryValidationRadio.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 possiate modificare facilmente le regole del widget Gruppo pulsanti di scelta 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.
Applicare uno stile a un widget Gruppo pulsanti di scelta convalida (istruzioni generali)
-
Aprite il file SpryValidationRadio.css.
-
Individuate la regola CSS relativa alla parte di widget che desiderate modificare. Per modificare ad esempio il colore di sfondo dello stato obbligatorio del widget Gruppo pulsanti di scelta, modificate la regola radioRequiredState nel file SpryValidationRadio.css.
-
Apportate le modifiche alla regola CSS e salvate il file.
Il file SpryValidationRadio.css contiene una serie di commenti con spiegazioni relative al codice e allo scopo di determinate regole. Per ulteriori informazioni, leggete i commenti nel file.
Formattare il testo dei messaggi di errore del widget Gruppo pulsanti di scelta convalida
Per impostazione predefinita, i messaggi di errore relativi al widget Gruppo pulsanti di scelta convalida vengono visualizzati in rosso, con un bordo pieno di un pixel attorno al testo.
-
Per modificare lo stile del testo dei messaggi di errore di un widget Gruppo pulsanti di scelta 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
.radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Altri argomenti correlati
Accedi al tuo account