Utilisation du widget Validation de zone de texte. Adobe DREAMWEAVER CS3

DREAMWEAVER CS3

Guide de l'utilisateur

442

Utilisation du widget Validation de zone de texte

A propos du widget Validation de zone de texte

Le widget Validation Spry de champ de texte est un champ de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre du texte. Par exemple, vous pouvez ajouter un widget Validation de zone de texte à un formulaire dans affiche un message qui indique que les informations entrées ne sont pas valides.

A

B

C

D

A.

Widget Champ de texte, conseil activé

B.

Widget Champ de texte, état valide

C.

Widget Champ de texte, état non valide

D.

Widget Champ de texte, état obligatoire

Le widget Validation de zone de texte peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.).

Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Validation de zone de texte peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des données ou lorsqu'il tente d'envoyer le formulaire.

Etat initial

Etat du widget lorsque la page se charge dans le navigateur, ou lorsque l'utilisateur réinitialise le formulaire.

Etat actif

Etat du widget lorsque l'utilisateur place le point d'insertion à l'intérieur.

Etat valide

Etat du widget lorsque l'utilisateur a entré des informations correctes, ce qui permet l'envoi du formulaire.

Etat non valide

lieu de 2006.

Etat du widget si l'utilisateur a entré du texte dans un format non valide. Par exemple, 06 pour l'année au

Etat obligatoire

Etat du widget lorsque l'utilisateur n'a pas entré du texte obligatoire dans la zone de texte.

N ombre minimal de caractères

Etat du widget lorsque l'utilisateur a entré moins de caractères que le nombre minimal requis pour le champ de texte.

N ombre maximal de caractères

Etat du widget lorsque l'utilisateur a entré plus de caractères que le nombre maximal admis pour le champ de texte.

Valeur minimale

Etat du widget lorsque l'utilisateur a entré une valeur inférieure à la valeur requise par la zone de texte.

S'applique aux validations de type entier, réel et date.

Valeur maximale

Etat du widget lorsque l'utilisateur a entré une valeur supérieure à la valeur maximale admise par la zone de texte. S'applique aux validations de type entier, réel et date.

Lorsqu'un widget Validation de zone de texte passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entré de texte dans un champ obligatoire, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationTextField.css.

DREAMWEAVER CS3


443

Le code HTML par défaut du widget Validation de zone de texte, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input> du champ de texte. Le code HTML du widget Validation de zone de texte comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de zone de texte, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytextfield_fr .

Insertion du widget Validation de zone de texte

1

Choisissez Insertion > Spry > Validation Spry de champ de texte.

2

Complétez la boîte de dialogue Attributs d'accessibilité à des balises objet, puis cliquez sur OK.

Remarque :

Vous pouvez également insérer un widget Validation de zone de texte par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi

« Création de formulaires HTML accessibles » à la page 584

Définition d'un type de validation et d'un format

Vous pouvez définir différents types de validation pour le widget Validation de zone de texte. Par exemple, vous pouvez définir un type de validation Carte de crédit si la zone de texte est destinée à contenir des numéros de carte de crédit.

1

Sélectionnez un widget Validation de zone de texte dans la fenêtre de document.

2

Dans l'inspecteur Propriétés (Fenêtre Propriétés), choisissez un type de validation dans le menu déroulant Type.

3

Le cas échéant, sélectionnez un format dans le menu déroulant Format.

Pour la plupart des types de validation, la zone de texte attend un format standard. Par exemple, si vous appliquez le type de validation Entier à une zone de texte, le widget n'effectue de validation que si l'utilisateur a entré des chiffres dans la zone de texte. Toutefois, certains types de validation permettent de choisir le type de format que votre zone de texte acceptera.

Le tableau suivant énumère les types de validation et les formats disponibles dans l'inspecteur Propriétés :

T ype de validation

A ucun

Nombre entier

A dresse

él ectronique

D ate

Heure

C arte de cr

é dit

C ode posta l

Num

é ro de t

élé phone

Format

A ucun format particu l ier requis.

La

z one de te x te n

' accepte que des chiffres.

La

z one de te x te accepte

l es adresses

él ectroniques contenant un

@ et un point

(

.

) pr

é c

é d

é et suivi d

' au moins une

l ettre.

F ormats variab l es.

Sél ectionne zen un dans

l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.



l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.

« tt repr

é sente

l e format am

/ pm et

« t

» l e format a

/ p.



l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.

V ous pouve z d

é cider d

' accepter toutes

l es cartes de cr

é dit ou sp

é cifier un type de carte particu l ier

(M aster

C ard

, V isa

, etc.

)

.

Le champ de te x te n

' accepte pas

l es espaces dans un num

é ro de carte de cr

é dit

( p.e

x

.

4321 3456 4567 4567)

.



l e menu

F ormat de

l' inspecteur

P ropri

é t

é s.

La


l es num

é ros de t

élé phone mis en forme pour

l es

E tats

-

Unis et

l e

C anada

, à savoir

(000) 000-

0000, ou

l es formats personna l is

é s.

S i vous s

él ectionne z l e format personna l is

é, entre z ce format

, par e x emp l e

000

.

00(00), dans

l a

z one

S ch

é ma.

DREAMWEAVER CS3


444

T ype de validation

Num

é ro de s

é curit

é socia l e

D evise

Nombre r

é e l/

Notation scientifique

A dresse I

P

U

R

L

P ersonna l is

é

Format

La


l es num

é ros de s

é curit

é socia l e en format 000-00-0000 .

La


l es devises en format

1,000,000

.

00 ou 1 .

000 .

000,00 .

V a l ide divers types de nombres es entiers

( par e x emp l e

1), l es va l eurs f l ottantes ( par e x emp l e 12,123) et l es va l eurs f l ottantes en notation scientifique

( par e x emp l e

1,212 e

+12,

1,221 e -12, o ù e repr é sente une puissance de 10) .



l e menu

F ormat de l' inspecteur P ropri é t é s.

La


l es U

R

L en format http

://xxx

.

xxx

.

xxx ou ftp ://xxx .

xxx .

xxx .

P ermet de choisir un type et un format de va l idation personna l is é .

E ntre z l e sch é ma du format ( et une indication , si n

é cessaire

), dans

l' inspecteur

P ropri

é t

é s.

Définition du moment de validation

Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il tape des données ou lorsqu'il tente d'envoyer le formulaire.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option qui indique le moment où vous voulez que la validation se produise. Vous pouvez activer toutes les options ou n'en activer aucune.

Flou

Validation quand l'utilisateur clique en dehors de la zone de texte.

Remplacer

Validation lorsque l'utilisateur modifie du texte à l'intérieur de la zone de texte.

Envoyer

Validation lorsque l'utilisateur tente d'envoyer le formulaire.

Définition d'un nombre minimal et maximal de caractères

Cette option n'est disponible que pour les types de validation Aucun, Nombre entier, Adresse électronique et URL.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Nbre min. de caract. ou Nbre max. de caract. Par exemple, si vous entrez 3 dans la zone Nbre min. de caract., le widget n'effectue la validation que si l'utilisateur entre au moins 3 caractères.

Définition des valeurs minimale et maximale

Cette option n'est disponible que pour les types de validation Nombre entier, Heure, Devise et Nombre réel/Notation scientifique.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un nombre dans la zone Valeur min. ou Valeur max. Par exemple, si vous entrez 3 dans la zone Valeur min., le widget n'effectue de validation que si l'utilisateur entre le chiffre 3 ou une valeur plus élevée (4, 5, 6 etc.) dans la zone de texte.

Affichage des états du widget en mode Création

1


2

Dans l'inspecteur Propriétés (Fenêtre Propriétés), sélectionnez l'état à afficher dans le menu déroulant Aperçu des états.

Par exemple, si vous voulez afficher le widget dans son état valide, sélectionnez Valide.

DREAMWEAVER CS3


445

Modification de l'état obligatoire d'une zone de texte

Par défaut, tous les widgets Validation de zone de texte que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur y entre des données lorsqu'ils sont publiés sur une page Web. Vous pouvez toutefois rendre la saisie de texte dans certaines zones facultative pour l'utilisateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos préférences.

Création d'un conseil pour une zone de texte

Comme les zones de texte peuvent posséder de multiples formats, il peut être utile de donner aux utilisateurs un conseil relatif aux données qu'ils doivent entrer. Par exemple, une zone de texte possédant le type de validation Numéro de téléphone n'accepte que les numéros en format (000) 000-0000. Vous pouvez entrer cet exemple de numéro sous la forme d'un conseil, de manière à ce que la zone affiche le format correct lorsque l'utilisateur charge la page dans un navigateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.

Blocage des caractères incorrects

Vous pouvez empêcher les utilisateurs d'entrer des caractères non valides dans un widget Validation de zone de texte. Par exemple, si vous activez cette option pour un widget possédant le type de validation Nombre entier, rien ne s'affiche dans le champ si l'utilisateur tente d'y taper une lettre.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Imposer modèle.

Personnalisation du widget Validation de zone de texte

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de zone de texte, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget

Validation de zone de texte de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytextfield_custom_fr .

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier

SpryValidationTextField.css. Dreamweaver enregistre le fichier SpryValidationTextField.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de zone de texte. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Validation de zone de texte dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau

Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Voir aussi

« Panneau Styles CSS en mode Actuel » à la page 122

Définition du style du texte de message d'erreur d'un widget Validation de zone de texte

Par défaut, les messages d'erreur du widget Validation de zone de texte s'affichent en rouge, entourés d'un bord épais de 1 pixel.

❖

Pour modifier le style des messages d'erreur d'un widget Validation de zone de texte, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

C

DREAMWEAVER CS3


446

T exte à modifier

T e x te de message d ' erreur

Règle CSS pertinente

.te

x tfie l d

R equired

S tate .te

x tfie l d

R equired

M sg

,

.te

x tfie l dInva l id F ormat S tate .te

x tfie l dInva l id F ormat M sg ,

.te

x tfie l d

M in

V a l ue

S tate .te

x tfie l d

M in

V a l ue

M sg

,

.te

x tfie l d M a xV a l ue S tate .te

x tfie l d M a xV a l ue M sg ,

.te

x tfie l d

M in

C hars

S tate .te

x tfie l d

M in

C hars

M sg

,

.te

x tfie l d M a xC hars S tate .te

x tfie l d M a xC hars M sg

Propriétés à modifier

co l or

: #CC3333

; border

: 1 p x so l id

#CC3333 ;

Modification des couleurs d'arrière-plan du widget Validation de zone de texte

❖

Pour modifier les couleurs d'arrière-plan du widget Validation de zone de texte dans différents états, recherchez la règle

CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur à modifier

C ou l eur d

' arri

è re

p l an du w idget actif


C ou l eur d

' arri

è re

p l an du w idget dans un

é tat va l ide

.te

x tfie l d

V a l id

S tate input

, input.te

x tfie l d

V a l id

S tate

C ou l eur d

' arri

è re

p l an du w idget dans un

é tat non va l ide input.te

x tfie l d

R equired

S tate

,

.te

x tfie l d

R equired

S tate input

, input.te

x tfie l dInva l id

F ormat

S tate

,

.te

x tfie l dInva l id

F ormat

S tate input

, input.te

x tfie l d

M in

V a l ue

S tate

,

.te

x tfie l d

M in

V a l ue

S tate input

, input.te

x tfie l d

M a xV a l ue

S tate

,

.te

x tfie l d

M a xV a l ue

S tate input

, input.te

x tfie l d

M in

C hars

S tate

,

.te

x tfie l d

M in

C hars

S tate input

, input.te

x tfie l d

M a xC hars

S tate

,

.te

x tfie l d

M a xC hars

S tate input

.te

x tfie l d

F ocus

S tate input

, input.te

x tfie l d

F ocus

S tate

Propriété à modifier

bac k ground

co l or

: #B8F5B1

; bac k ground

co l or

: #FF9F9F

; bac k ground

co l or

: #FFFFCC

;

B

Utilisation du widget Zone de texte de validation

A propos du widget Zone de texte de validation

Le widget Validation Spry de zone de texte est une zone de texte qui affiche des états valides ou non valides lorsque le visiteur du site entre quelques lignes de texte. Si la zone de texte est un champ obligatoire et que l'utilisateur n'y entre pas de texte, le widget affiche un message indiquant qu'une valeur est requise.

A

D

E

A.

Compteur de caractères restants

B.

Widget Zone de texte activé, nombre maximal de caractères

C.

Widget Zone de texte activé, état valide

D.

Widget Zone de texte, état obligatoire

E.

Compteur de caractères tapés

DREAMWEAVER CS3


447

Le widget Zone de texte de validation peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.).

Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Zone de texte de validation peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il entre des données ou lorsqu'il tente d'envoyer le formulaire.

Etat initial


Etat actif

Etat du widget lorsque l'utilisateur place le point d'insertion à l'intérieur.

Etat valide

Etat du widget lorsque l'utilisateur a entré des informations correctes, ce qui permet l'envoi du formulaire.


Etat du widget si l'utilisateur n'a pas entré de texte.

N ombre minimal de caractères

Etat du widget lorsque l'utilisateur a entré moins de caractères que le nombre minimal requis pour la zone de texte.

N ombre maximal de caractères

Etat du widget lorsque l'utilisateur a entré plus de caractères que le nombre maximal admis pour la zone de texte.

Lorsqu'un widget Zone de texte de validation passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas entré de texte dans la zone de texte, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez entrer une valeur ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationTextArea.css.

Le code HTML par défaut du widget Zone de texte de validation, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <textarea> de la zone de texte. Le code HTML du widget Zone de texte de validation comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Zone de texte de validation, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprytextarea_fr .

Insertion du widget Zone de texte de validation

1

Choisissez Insertion > Spry > Validation Spry de zone de texte.

2


Remarque :

Vous pouvez également insérer un widget Zone de texte de validation par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi




1

Sélectionnez un widget Zone de texte de validation dans la fenêtre de document.

2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez l'option Valider si qui indique le moment où vous voulez que la validation se produise. Vous pouvez activer toutes les options ou n'en activer aucune.

Flou

Validation quand l'utilisateur clique en dehors de la zone de texte.

Remplacer

Validation lorsque l'utilisateur modifie du texte à l'intérieur de la zone de texte.

Envoyer


Définition d'un nombre minimal et maximal de caractères

1


DREAMWEAVER CS3


448

2

Dans l'inspecteur Propriétés du calque (Fenêtre > Propriétés), entrez un nombre dans la zone Nbre min. de caract. ou

Nbre max. de caract. Par exemple, si vous entrez 20 dans la zone Nbre min. de caract., le widget n'effectue la validation que si l'utilisateur entre au moins 20 caractères dans la zone de texte.

Ajout d'un compteur de caractères

Vous pouvez ajouter un compteur de caractères qui indique à l'utilisateur combien de caractères il a tapé ou combien il lui reste de caractères lorsqu'il entre du texte dans la zone de texte. Par défaut, lorsque vous ajoutez un compteur de caractères, il s'affiche à l'extérieur du widget, près de son coin inférieur droit.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Nombre caract. ou Car. restants.

Remarque :

L'option Car. restants n'est disponible que si vous avez déjà fixe un nombre maximal de caractères autorisés.


1


2



Modification de l'état obligatoire d'une zone de texte

Par défaut, tous les widgets Zone de texte de validation que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur y entre des données lorsqu'ils sont publiés sur une page Web. Vous pouvez toutefois stipuler que certaines zones de texte sont facultatives pour la validation.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Obligatoire, en fonction de vos préférences.

Création d'un conseil pour une zone de texte

utilisateurs le type d'informations qu'ils doivent y entrer. La zone de texte affiche le conseil lorsque l'utilisateur charge la page dans un navigateur.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), entrez un conseil dans la zone Conseil.

Blocage des caractères supplémentaires

Vous pouvez empêcher les utilisateurs d'entrer davantage de caractères que le nombre maximal admis dans un widget Zone de texte de validation. Par exemple, si vous activez cette option pour un widget configuré de manière à ne pas accepter plus de 20 caractères, l'utilisateur ne pourra pas entrer plus de 20 caractères dans la zone de texte.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Bloquer les caractères supplémentaires.

Personnalisation du widget Zone de texte de validation

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Zone de texte de validation, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Zone de texte de validation de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprytextarea_custom_fr .

DREAMWEAVER CS3


449


SpryValidationTextArea.css. Dreamweaver enregistre le fichier SpryValidationTextArea.css dans le dossier SpryAssets de votre site dès que vous créez un widget Zone de texte de validation. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Zone de texte de validation dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau


Voir aussi


Définition du style du texte de message d'erreur d'un widget Zone de texte de validation

Par défaut, les messages d'erreur du widget Zone de texte de validation s'affichent en rouge, entourés d'un bord épais de 1 pixel.

❖

Pour modifier le style des messages d'erreur d'un widget Zone de texte de validation, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

T exte à modifier



.te

x tarea R equired S tate

.te

x tarea

R equired

M sg

,

.te

x tarea M in C hars S tate

.te

x tarea

M in

C hars

M sg

,

.te

x tarea M a xC hars S tate

.te

x tarea

M a xC hars

M sg


co l or : #CC3333 ; border : 1 p x so l id

#CC3333

;

Modification des couleurs d'arrière-plan du widget Zone de texte de validation

❖

Pour modifier les couleurs d'arrière-plan du widget Zone de texte de validation dans différents états, recherchez la règle

CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur d'arrière-plan à modifier Règle CSS pertinente

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat va l ide

.te

x tarea

V a l id

S tate te x tarea

, te x tarea.te

x tarea

V a l id

S tate

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat non va l ide te x tarea.te

x tarea

R equired

S tate

,

.te

x tarea

R equired

S tate te x tarea

, te x tarea.te

x tarea

M in

C hars

S tate

,

.te

x tarea

M in

C hars

S tate te x tarea

, te x tarea.te

x tarea

M a xC hars

S tate

,

.te

x tarea

M a xC hars

S tate te x tarea

C ou l eur d

' arri

è re

p l an du

w idget actif .te

x tarea

F ocus

S tate te x tarea

, te x tarea.te

x tarea

F ocus

S tate


bac k ground

co l or

: #B8F5B1

; bac k ground

co l or

: #FF9F9F

; bac k ground

co l or

: #FFFFCC

;

Utilisation du widget Validation de la sélection

A propos du widget Validation de la sélection

Un widget Validation de sélection Spry est un menu déroulant qui affiche des états valides ou non valides lorsque l'utilisateur effectue une sélection. Par exemple, vous pouvez insérer un widget Validation de sélection contenant une liste d'états, regroupés en différentes sections et séparés par des lignes horizontales. Si l'utilisateur sélectionne par erreur l'une des lignes de séparation au lieu d'un des états, le widget Validation de sélection affiche un message pour indiquer que la sélection n'est pas valide.

DREAMWEAVER CS3


450

L'exemple suivant montre un widget Validation de sélection développé, ainsi que la forme réduite de ce widget dans divers

B

C

D

A

A.

Widget Validation de sélection activé

B.

Widget Validation de sélection, état valide

C.

Widget Validation de sélection, état obligatoire

D.

Widget Validation de sélection, état non valide

Le widget Validation de sélection peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.). Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés.

Un widget Validation de sélection peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une sélection ou lorsqu'il tente d'envoyer le formulaire.

Etat initial


Etat actif

Etat du widget lorsque l'utilisateur clique dessus.

Etat valide

Etat du widget lorsque l'utilisateur a sélectionné un élément valide, ce qui permet l'envoi du formulaire.

Etat non valide

Etat du widget si l'utilisateur a sélectionné un élément non valide.


Etat du widget si l'utilisateur n'a pas sélectionné d'élément valide.

Lorsqu'un widget Validation de sélection passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas sélectionné d'élément dans le menu, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez sélectionner un élément ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationSelect.css.

Le code HTML par défaut du widget Validation de sélection, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <select> de la zone de texte. Le code HTML du widget Validation de sélection comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de sélection, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_spryselect_fr .

Insertion du widget Validation de sélection

1

Choisissez Insertion > Spry > Validation de sélection Spry.

2


3

En mode Code, ajoutez des balises d'option contenant des éléments de menu et des valeurs. Dreamweaver ne s'en charge pas automatiquement. Pour plus d'informations, consultez la rubrique ci-dessus.

Remarque :

Vous pouvez également insérer un widget Validation de sélection par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi


DREAMWEAVER CS3


451



1

Sélectionnez un widget Validation de sélection dans la fenêtre de document.

2


Flou

Validation quand l'utilisateur clique en dehors du widget.

Remplacer

Validation lorsque l'utilisateur effectue des sélections.

Envoyer



1


2



Interdiction ou autorisation de valeurs vides

Par défaut, tous les widgets Validation de sélection que vous insérez à l'aide de Dreamweaver exigent que l'utilisateur sélectionne des éléments de menu possédant une valeur associée lorsque le widget et publié sur une page Web. Vous pouvez toutefois désactiver cette option.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l'option Ne pas autoriser Valeur vide, en fonction de vos préférences.

Spécification d'une valeur incorrecte

Vous pouvez définir une valeur qui est considérée comme non valide si l'utilisateur sélectionne un élément de menu associé

à cette valeur. Par exemple, si vous définissez -1 comme valeur non valide et si vous l'attribuez à une balise d'option, le widget affiche un message d'erreur si l'utilisateur sélectionne cet élément de menu.

<option value="-1"> ------------------- </option>

1


2

Dans l'inspecteur Propriétés du calque (Fenêtre > Propriétés), entrez un nombre à utiliser comme valeur non valide dans la zone Valeur non valide.

Personnalisation du widget Validation de sélection

Bien que l'inspecteur Propriétés permette d'apporter des modifications simples à un widget Validation de sélection, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget

Validation de sélection de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_spryselect_custom_fr .


SpryValidationSelect.css. Dreamweaver enregistre le fichier SpryValidationSelect.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de sélection. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

Même s'il est facile de modifier directement les règles du widget Validation de sélection dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

A

DREAMWEAVER CS3


452

Voir aussi


Définition du style du texte de message d'erreur d'un widget Validation de sélection

Par défaut, les messages d'erreur du widget Validation de sélection s'affichent en rouge, entourés d'un bord épais de 1 pixel.

❖

Pour modifier le style des messages d'erreur d'un widget Validation de sélection, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

T exte à mettre en forme

T e x te de message d

' erreur

Règle CSS pertinente Propriétés à modifier

.se

l ect

R equired

S tate

.se

l ect R equired M sg , .se

l ectInva l id S tate

.se

l ectInva l id

M sg co l or

: #CC3333

; border

: 1 p x so l id

#CC3333 ;

Modification des couleurs d'arrière-plan du widget Validation de sélection

❖

Pour modifier les couleurs d'arrière-plan du widget Validation de sélection dans différents états, recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez la couleur d'arrière-plan par défaut :

Couleur d'arrière-plan à modifier Règle CSS pertinente

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat va l ide

.se

l ect

V a l id

S tate se l ect

, se l ect.se

l ect

V a l id

S tate

C ou l eur d

' arri

è re

p l an du

w idget dans un

é tat non va l ide se l ect.se

l ect

R equired

S tate

,

.se

l ect

R equired

S tate se l ect

, se l ect.se

l ectInva l id

S tate

,

.se

l ectInva l id

S tate se l ect

C ou l eur d

' arri

è re

p l an du

w idget actif .se

l ect

F ocus

S tate se l ect

, se l ect.se

l ect

F ocus

S tate


bac k ground

co l or

: #B8F5B1

; bac k ground

co l or

: #FF9F9F

; bac k ground

co l or

: #FFFFCC

;

Utilisation du widget Validation de case à cocher

A propos du widget Validation de case à cocher

Le widget Validation de case à cocher Spry est une case à cocher ou un groupe de cases à cocher, dans un formulaire HTML, qui affiche des états valides ou non valide lorsque l'utilisateur active ou n'active pas une case à cocher. Par exemple, vous pouvez ajouter un widget Validation de case à cocher à un formulaire dans lequel l'utilisateur doit effectuer trois sélections.

Si l'utilisateur n'effectue pas ces trois sélections, le widget renvoie un message indiquant que le nombre minimal de sélections n'a pas été effectué.

B

A.

Groupe de widgets Validation de case à cocher, nombre minimal de sélections

B.

Widget Validation de case à cocher, état obligatoire

DREAMWEAVER CS3


453

Le widget Validation de case à cocher peut posséder divers états (par exemple valide, non valide, valeur obligatoire, etc.).

Vous pouvez modifier les propriétés de ces états à l'aide de l'inspecteur Propriétés, en fonction des résultats de validation désirés. Un widget Validation de case à cocher peut effectuer une validation à différents moments, par exemple lorsque le visiteur clique en dehors du widget, pendant qu'il effectue une sélection ou lorsqu'il tente d'envoyer le formulaire.

Etat initial


Etat valide

Etat du widget lorsque l'utilisateur a effectué une sélection ou le nombre correct de sélections, ce qui permet l'envoi du formulaire.


Etat du widget si l'utilisateur n'a pas effectué une sélection obligatoire.

N ombre minimal de sélections

minimal requis.

Etat du widget lorsque l'utilisateur a sélectionné moins de cases à cocher que le nombre

N ombre maximal de sélections

maximal admis.

Etat du widget lorsque l'utilisateur a sélectionné plus de cases à cocher que le nombre

Lorsqu'un widget Validation de case à cocher passe dans l'un de ces états suite à l'interaction avec l'utilisateur, la logique du cadre applicatif Spry applique une classe CSS spécifique au conteneur HTML pour le widget lors de l'exécution. Par exemple, si un utilisateur tente d'envoyer un formulaire mais n'a pas effectué de sélections, Spry applique au widget une classe qui le force à afficher le message d'erreur « Vous devez effectuer une sélection ». Les règles qui contrôlent le style et les états d'affichage de messages d'erreur se trouvent dans le fichier CSS qui accompagne le widget,

SpryValidationCheckbox.css.

Le code HTML par défaut du widget Validation de case à cocher, généralement dans un formulaire, contient une balise conteneur <span> qui entoure la balise <input type="checkbox"> de la zone de texte. Le code HTML du widget Validation de case à cocher comprend également des balises script dans l'en-tête du document et après le marquage HTML du widget.

Vous trouverez une explication plus détaillée du fonctionnement du widget Validation de case à cocher, ainsi qu'une description complète de son code, à l'adresse www.adobe.com/go/learn_dw_sprycheckbox_fr .

Insertion du widget Validation de case à cocher

1

Choisissez Insertion > Spry > Validation de case à cocher Spry.

2


Remarque :

Vous pouvez également insérer un widget Validation de case à cocher par l'intermédiaire de la catégorie Spry de la barre Insertion.

Voir aussi



Vous pouvez fixer le moment auquel la validation se produit : quand le visiteur du site clique en dehors du widget, pendant qu'il effectue des sélections ou lorsqu'il tente d'envoyer le formulaire.

1

Sélectionnez un widget Validation de case à cocher dans la fenêtre de document.

2


Flou

Validation quand l'utilisateur clique en dehors de la case à cocher.

Remplacer

Validation lorsque l'utilisateur effectue des sélections.

Envoyer


DREAMWEAVER CS3


454

Définition d'une plage de sélections minimale et maximale

Par défaut, un widget Validation de case à cocher est obligatoire. Si vous insérez plusieurs cases à cocher sur la page, il est toutefois possible de spécifier une plage de sélections minimale et maximale. Par exemple, si la balise <span> d'un widget

Validation de case à cocher contient six cases à cocher et si vous voulez que l'utilisateur en sélectionne au moins trois, vous pouvez définir une préférence de ce type pour le widget entier.

1


2

Dans l'inspecteur Propriétés (Fenêtre > Propriétés), activez l'option Imposer plage.

3

Entrez un nombre minimal ou maximal (voire les deux) de cases à cocher que l'utilisateur doit activer.


1


2


Par exemple, sélectionnez Initial pour afficher le widget dans son état initial.

Personnalisation des messages d'erreur d'un widget Validation de case à cocher

Par défaut, les messages d'erreur du widget Validation de case à cocher s'affichent en rouge, entourés d'un bord épais de 1 pixel. Vous pouvez modifier les règles CSS du widget Validation de case à cocher de manière à créer un widget dont le style est adapté à vos besoins. Vous trouverez la liste des tâches de définition de style avancées à l'adresse www.adobe.com/go/learn_dw_sprycheckbox_custom_fr .

1

Ouvrez le fichier SpryValidationCheckbox.css.

Dreamweaver enregistre le fichier SpryValidationCheckbox.css dans le dossier SpryAssets de votre site dès que vous créez un widget Validation de case à cocher. La consultation de ce fichier peut s'avérer utile, car il contient des informations commentées au sujet de divers styles qui s'appliquent au widget.

2

Recherchez la règle CSS appropriée dans le tableau suivant, puis modifiez les propriétés par défaut ou ajoutez vos propriétés et valeurs de style du texte :

T exte à mettre en forme



.chec

k bo xR equired S tate

.chec

k bo xR equired

M sg

,

.chec

k bo xM in S e l ections S tate

.chec

k bo xM in

S e l ections

M sg

,

.chec

k bo xM a xS e l ections S tate

.chec

k bo xM a xS e l ections

M sg


co l or : #CC3333 ; border : 1 p x so l id

#CC3333

;

Même s'il est facile de modifier directement les règles du widget Validation de case à cocher dans le fichier CSS qui l'accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. Le panneau


Voir aussi


Utilisation du widget Validation de zone de texte. Adobe DREAMWEAVER CS3

Utilisation du widget Validation de zone de texte

A propos du widget Validation de zone de texte

Insertion du widget Validation de zone de texte

Définition d'un type de validation et d'un format

Définition du moment de validation

Définition d'un nombre minimal et maximal de caractères

Définition des valeurs minimale et maximale

Affichage des états du widget en mode Création

Modification de l'état obligatoire d'une zone de texte

Création d'un conseil pour une zone de texte

Blocage des caractères incorrects

Personnalisation du widget Validation de zone de texte

Utilisation du widget Zone de texte de validation

A propos du widget Zone de texte de validation

Insertion du widget Zone de texte de validation

Définition du moment de validation

Définition d'un nombre minimal et maximal de caractères

Ajout d'un compteur de caractères

Affichage des états du widget en mode Création

Modification de l'état obligatoire d'une zone de texte

Création d'un conseil pour une zone de texte

Blocage des caractères supplémentaires

Personnalisation du widget Zone de texte de validation

Utilisation du widget Validation de la sélection

A propos du widget Validation de la sélection

Insertion du widget Validation de sélection

Définition du moment de validation

Affichage des états du widget en mode Création

Interdiction ou autorisation de valeurs vides

Spécification d'une valeur incorrecte

Personnalisation du widget Validation de sélection

Utilisation du widget Validation de case à cocher

A propos du widget Validation de case à cocher

Insertion du widget Validation de case à cocher

Définition du moment de validation

Définition d'une plage de sélections minimale et maximale

Affichage des états du widget en mode Création

Personnalisation des messages d'erreur d'un widget Validation de case à cocher

Manuels associés

Adobe

Device Central CS3

Adobe

Dreamweaver 8

Adobe

Dreamweaver CS5.5

Adobe

DREAMWEAVER MX

Adobe

Fireworks CS3

Adobe

Dreamweaver CS4

Adobe

Dreamweaver MX 2004

Adobe

Photoshop CS2

Adobe

DREAMWEAVER CS3

Sommaire