Accessibilité
Ressources pour les développeurs

Article ColdFusion

 

ColdFusion MX 7


Table des matières

Meilleure validation des champs de formulaires

Les formulaires de saisie de données ont toujours été le talon d'Achille des applications web. ColdFusion MX 7 fournit de bien meilleurs résultats que le format HTML avec, notamment, une meilleure validation des champs.

ColdFusion contient des types de validation supplémentaires, comme la validation des adresses électroniques et des URL, une fonction souvent demandée. En outre, le message d'erreur JavaScript qui apparaît avec la validation côté client affiche toutes les erreurs de validation à la fois, plus seulement la première d'entre elles.

Sans doute aussi important, il est désormais plus simple d'effectuer la validation côté client et côté serveur en même temps. La balise cfinput comprend un nouvel attribut, validateAt, qui peut avoir trois valeurs :

  • onSubmit (la valeur par défaut) spécifie une validation côté client lorsque le client envoie le formulaire, tout comme la validation côté client avec la balise cfinput actuelle.
  • onBlur spécifie une validation côté client dès que le champ devient « inactif » (lorsque l'utilisateur passe au champ suivant, par tabulation ou par clic de la souris, par exemple).
  • onServer spécifie une validation côté serveur, le type de validation utilisé pour les champs masqués. Cependant, il n'est pas nécessaire de définir ces champs, qui sont présents mais créés et insérés automatiquement.

Examinons le code suivant :

<!--- validation côté client à l'envoi --->
<cfinput type="text"
         name="quantite"
         validate="integer"
         validateAt="onSubmit"
         required="yes"
         message="Une quantité numérique est requise !">

<!--- validation côté client à l'état inactif --->
<cfinput type="text"
         name="quantite"
         validate="integer"
         validateAt="onBlur"
         required="yes"
         message="Une quantité numérique est requise !">

<!--- validation côté serveur --->
<cfinput type="text"
         name="quantite"
         validate="integer"
         validateAt="onServer"
         required="yes"
         message="Une quantité numérique est requise !">

Les trois balises cfinput effectuent la même validation, mais à des instants différents du processus. Cependant, les méthodes de validation peuvent être combinées. Par exemple, pour obtenir une validation côté client et côté serveur :

<!--- validation côté client à l'envoi --->
<cfinput type="text"
         name="quantite"
         validate="integer"
         validateAt="onSubmit,onServer"
         required="yes"
         message="Une quantité numérique est requise !">

L'attribut validateAt spécifie deux valeurs (onSubmit et onServer) qui permettent à ColdFusion de créer le code de validation côté client et d'insérer des champs masqués pour la validation côté serveur.

Une autre amélioration apportée à la fonction de validation est le « masque de saisie ». ColdFusion MX 7 comprend un nouvel attribut répondant à ce problème : l'attribut mask prend un masque de saisie qu'il utilise comme filtre de saisie des données. Un masque est une chaîne formée de caractères spéciaux utilisés pour valider les données saisies : un point d'interrogation (?) autorise n'importe quel caractère, la lettre A n'autorise que les caractères alphabétiques, le chiffre 9 n'autorise que les chiffres, et X autorise les caractères alphanumériques. Tout autre caractère est une valeur littérale et est intégré à la saisie.

Par exemple, pour valider un âge de trois chiffres :

<cfinput type="text"
         name="age"
         maxlength="3"
         mask="999">

Le filtre masque « 999 » n'accepte que les chiffres. Si l'utilisateur saisit des caractères autres que des chiffres, ces caractères sont ignorés par la balise. De même, pour valider un numéro de téléphone au format +33 (0)1 23 45 67 09, le code suivant serait utilisé :

<cfinput type="text"
         name="telephone"
         maxlength="13"
         mask="+99 (9)9 99 99 99 99">

Là encore, la valeur d'attribut de masque n'autorise que les chiffres, mais insère automatiquement les autres caractères.

Pour un code postal canadien, c'est le code suivant qui serait utilisé :

<cfinput type="text"
         name="codepostalca"
         maxlength="7"
         mask="A9A 9A9">

Et ainsi de suite. Le masque de saisie n'élimine pas le besoin de validation de la saisie mais est un pas supplémentaire conduisant à une meilleure satisfaction de l'utilisateur.