Vote utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

 

Vous avez créé un formulaire de contact pour votre site Web et vous aimeriez bien le doter de fonctions de validation ?

Par exemple vérifier qu'un champ contient bien une adresse mail, rendre des champs obligatoires, faire en sorte qu'un champ ne puisse recevoir que des données numériques ?

Et que diriez-vous de mettre également un contrôle anti-spam simple et efficace, sans utiliser ces maudites images captcha où tout le monde s'arrache les cheveux pour essayer de les lire ?

Dreamweaver dispose de ces fonctions de validation de formulaires. Nous allons apprendre à les utiliser.

 

Il nous faut tout d'abord... un formulaire

Ouvrez votre page contenant votre formulaire avec Dreamweaver.

Pour le tutoriel, je vais utiliser le mien : celui de LearnUp version 1.0

 

Comme vous pouvez le voir, mon formulaire est un formulaire de contact classique.

Je souhaite :

  • Que le champ "Nom, prénom ou pseudo" ne puisse pas être laissé vide
  • Que les deux champs "Votre adresse mail" et "Retapez votre adresse mail" soient obligatoirement renseignés, et qu'une vérification soit faite afin d'être certain qu'ils comportent une adresse mail de type "machin@bidule"
  • Que le champ "Age" comporte une valeur exclusivement numérique et comprises entre 9 et 99 (pour limiter les erreurs de saisie), mais sans qu'il soit obligatoirement renseigné
  • Que le champ de texte "Votre message" ne puisse pas être laissé vide
  • Que mon formulaire soit protégé contre les robots spammeurs

 

Déterminer les règles de validation des champs

Cliquez sur le bouton d'envoi de votre formulaire

 

Dans Dreamweaver, cherchez dans les panneaux de droite le panneau "Inspecteur de balises" et cliquez pour le développer

 

Dans l'onglet "Comportements", cliquez sur le bouton "+"

 

Puis sélectionnez "Valider le formulaire" dans la liste...

 

Une fenêtre s'ouvre. Celle-ci comporte une liste contenant la totalité des champs qui peuvent être validés. Il vous suffit de sélectionner les champs et de régler les conditions de validations dans la partie basse de la fenêtre...

 

Dans mon exemple, je souhaite donc rendre le champ "NOM" obligatoire...

 

Les champs "EMAIL" et "EMAIL2" obligatoires et contenant obligatoirement une adresse électronique...

 

Le champ AGE devant contenir un nombre entre "9" et "99", mais pas forcément renseigné par l'utilisateur...

 

Et enfin, le champ MESSAGE ne doit pas être vide. Puis, je clique sur le bouton "Ok" afin de valider les règles de validation

 

Si vous cliquez à nouveau sur le bouton "Envoyer" de votre formulaire, vous pouvez constater qu'un comportement est maintenant présent dans le panneau de l'inspecteur de balises :

014

 

 

Test des règles de validation

Testez les différentes règles de validation que vous venez de déterminer... Vous pouvez constater que votre formulaire ne part pas si l'une des règles n'est pas respectée.

Un message informe l'utilisateur des erreurs rencontrées (en anglais)

012

 

 

Créer une protection anti-spam

Grâce à cette fonction de validation, il est possible de créer une protection anti-spam simple et efficace.

Le principe est simple : nous allons vérifier que c'est bien un humain qui envoie le formulaire, en lui faisant faire un petit calcul mathématique !

Créez dans votre formulaire un nouveau champ, et posez une question à vos visiteurs, par exemple :

013

 

Double-cliquez ensuite sur le comportement que nous avons créé tout à l'heure afin de le modifier...

 

Cherchez le champ que vous venez de créer dans la liste (j'ai appellé le mien "CTRL")...

 

Puis, rendez-le obligatoire, et spécifiez le bonne réponse sous forme de fourchette. Validez par "Ok"

 

Ainsi, le formulaire ne sera envoyé que si le visiteur répond "10" à la question "Combien font 8+2 ?"... ^^

 

 

Modifier les messages d'erreur

Vous l'avez remarqué, les messages d'erreur sont en anglais.

Mais vous pouvez les modifier !

Il vous suffit pour cela de passer Dreamweaver en mode "Code" ...

 

Et de chercher le code suivant :

019

 

Vous pouvez ensuite modifier les messages à votre guise ^^

 

 

Conclusion

La fonction de validation de Dreamweaver est un moyen simple et rapide de contrôler le remplissage et l'envoi de vos formulaires.

Pensez à prévenir vos visiteurs que certains champs du formulaires sont obligatoires, au moyen du traditionnel "*", ou en créant un style visuel différent...

Mais n'abusez pas des champs obligatoires : réservez ces fonctions aux informations indispensables au risque d'ennuyer profondément vos internautes.

 

 

 

1000 caractères restants


Gravatar
Franck
Bonjour et merci pour ce bon tutoriel