Selezionate Inserisci > Spry > Conferma 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 Conferma convalida
Il widget Conferma convalida è un campo di testo o un campo del modulo della password che visualizza gli stati valido e non valido quando un utente inserisce un valore che non corrisponde al valore di un campo simile nello stesso modulo. Potete ad esempio aggiungere un widget Conferma convalida a un modulo per richiedere all'utente di ridigitare la password specificata in un campo precedente. Se l'utente non digita la password esattamente come è stata specificata precedentemente, il widget restituisce un messaggio di errore nel quale è indicato che i valori non corrispondono.
Potete utilizzare un widget Conferma convalida in abbinamento a un widget Campo di testo convalida per convalidare gli indirizzi e-mail.
Nota:
per utilizzare il widget Conferma, dovete avere familiarità con i widget di convalida Spry. In caso contrario, prima di procedere consultate Operazioni con il widget Spry Campo di testo convalida o qualsiasi panoramica relativa ai widget di convalida. Questa panoramica non descrive tutti i concetti di base dei widget di convalida
La seguente illustrazione mostra una tipica impostazione per un widget Conferma:
A. Campo per la password o widget Password convalida Spry B. Widget Conferma
Il widget Conferma convalida include alcuni stati, ad esempio valido, non valido, obbligatorio e così via. Potete modificare le proprietà di questi stati intervenendo sul file CSS corrispondente (SpryValidationConfirm.css), a seconda dei risultati di convalida desiderati. Un widget Conferma convalida può eseguire la convalida in punti differenti, ad esempio quando il visitatore del sito fa clic fuori dal widget, mentre digita o quando tenta di inviare il modulo.
Stato iniziale
Quando la pagina viene caricata nel browser oppure quando l'utente ripristina il modulo.
Stato attivo
Quando l'utente posiziona il punto di inserimento all'interno del widget.
Stato valido
Quando l'utente ha immesso informazioni corrette e il modulo può essere inviato.
Stato non valido
Quando l'utente inserisce testo che non corrisponde al testo immesso in un precedente campo di testo, widget Campo di testo convalida o Password convalida.
Stato Obbligatorio
Quando l'utente non inserisce il testo richiesto nel campo di testo.
Per una descrizione più dettagliata del funzionamento del widget Conferma convalida, oltre a informazioni aggiuntive sulla struttura del widget, fate riferimento a www.adobe.com/go/learn_dw_spryconfirm_it.
Inserire e modificare il widget Conferma convalida
Inserire il widget Conferma convalida
-
-
Impostate la finestra di dialogo Attributi di accessibilità tag Input e fate clic su OK.
Nota:
per inserire un widget Conferma convalida, potete anche utilizzare la categoria Spry nel pannello Inserisci.
Modificare lo stato obbligatorio di un widget Conferma convalida
Per impostazione predefinita, quando vengono pubblicati in una pagina Web, tutti i widget Conferma convalida inseriti mediante Dreamweaver richiedono l'input da parte dell'utente. Tuttavia, potete rendere opzionale il completamento dei campi di testo per la conferma da parte dell'utente.
-
Selezionate un widget Conferma convalida nella finestra del documento facendo clic sulla relativa linguetta blu.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate o deselezionate l'opzione Obbligatorio come desiderato.
Specificare il campo di testo su cui effettuare la convalida
-
Selezionate un widget Conferma convalida nella finestra del documento facendo clic sulla relativa linguetta blu.
-
Nella finestra di ispezione Proprietà (Finestra > Proprietà), selezionate il campo di testo in base al quale effettuare la convalida selezionando un campo di testo dal menu a comparsa Convalida con. Tutti i campi di testo a cui sono assegnati ID univoci vengono visualizzati come opzioni nel menu a comparsa.
Visualizzare gli stati dei widget nella vista Progettazione
-
Selezionate un widget Conferma convalida 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. Ad esempio, selezionate Valido per vedere il widget nel suo stato valido.
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 Conferma convalida 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 campo di testo di conferma.
Cambia
Esegue la convalida quando l'utente modifica il testo all'interno del campo di testo di conferma.
Invio
Esegue la convalida quando l'utente tenta di inviare il modulo. L'opzione Invio è selezionata per impostazione predefinita.
Personalizzare il widget Conferma
Nonostante la finestra di ispezione Proprietà consenta di eseguire semplici modifiche a un widget Conferma convalida, non supporta le attività relative agli stili personalizzati. Potete variare il CSS del widget Conferma convalida in modo da creare un widget con lo stile che preferite. Per un elenco più dettagliato delle attività relative agli stili, fate riferimento a www.adobe.com/go/learn_dw_spryconfirm_custom_it.
Tutte le regole CSS elencate negli argomenti che seguono fanno riferimento alle regole predefinite contenute nel file SpryValidationConfirm.css. Quando create un widget conferma convalida Spry, Dreamweaver salva il file SpryValidationConfirm.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 Conferma 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 Conferma convalida (istruzioni generali)
-
Aprite il file SpryValidationConfirm.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 Conferma, modificate la regola input.confirmRequiredState nel file SpryValidationConfirm.css.
-
Apportate le modifiche alla regola CSS e salvate il file.
Il file SpryValidationConfirm.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.
Formattazione del testo dei messaggi di errore del widget Conferma convalida
Per impostazione predefinita, i messaggi di errore relativi al widget Conferma 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 Conferma 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 da modificare
Regola CSS pertinente
Proprietà relative da modificare
Testo del messaggio di errore
.confirmRequiredState .confirmRequiredMsg, .confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Modificare i colori di sfondo del widget conferma convalida
-
Per modificare il colore di sfondo del widget Conferma convalida in vari stati, utilizzate la tabella che segue per individuare 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
.confirmValidState input, input.confirmValidState background-color: #B8F5B1;
Colore di sfondo del widget in stato non valido
input.confirmRequiredState, .confirmRequiredState input, input.confirmInvalidState, .confirmInvalidState input background-color: #FF9F9F;
Colore di sfondo del widget attivo
.confirmFocusState input, input.confirmFocusState background-color: #FFFFCC;
