ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.
Accès rapide : Validation côté client VS validation côté serveur Mise en oeuvre d'une page Web avec validation d'un formulaire Court-circuiter la validation d'un formulaire Les différents tags de validation proposés par Ellipse
Votre application Web va certainement nécessiter que vous développiez des formulaires de saisie. Afin de garantir la cohérence des données mises en jeu par votre application, il sera nécessaire de vérifier les données saisies par les différents utilisateurs, et ce avant de les traiter et de, pourquoi pas, les stocker en base de données.
Les technologies Web permettent de placer deux types de code de validation : du code exécuté sur le poste du client (certainement en Javascript) et du code devant s'exécuter sur le serveur HTTP(HTTP : HyperText Transfert Protocol) . Quel type de validation doit t'on préferer : Côté client ou bien côté serveur ? En réalité, la bonne réponse est : les deux !
La validation côté client est importante : elle permet d'éviter des allers/retours HTTP(HTTP : HyperText Transfert Protocol) inutiles sur le réseau. Par exemple, si un champ est à renseigner obligatoirement, il est dommage que le formulaire soit effectivement envoyé au serveur en sachant pertinemment que le serveur va refuser la demande et vous indiquer de saisir les éléments manquants du formulaire considéré.
D'un autre point de vue, ne baser la vérification que et uniquement que du côté client serait une erreur grave de votre part. Effectivement, l'utilisateur du navigateur peut lui demander d'inactiver les scripts clients (y compris Javascript) en quelques clics de la souris. Une validation côté serveur est donc clairement obligatoire si vous voulez garantir la cohérence des données soumises. Un autre exemple, si vous devez valider une date à partir de la date, courante, sachez que le client pourrait changer sa configuration et, ainsi, faire croire à votre formulaire que la date est correcte. Là aussi, il faut que le serveur garantisse la cohérence de l'information.
Donc, au pire, vous ne fournissez qu'une validation côté serveur. Au mieux, vous validez votre formulaire en partie du côté client, mais aussi une seconde fois du côté serveur. Par contre, il est clair que, du coup, cette double validation augmente la quantité de code à développer. Encore une fois, le framework Ellipse va simplifier la mise en oeuvre des formulaires et des contrôles de validation qui leurs sont associés. Effectivement, Ellipse vous fourni un certain nombre de composants Web de validation prêts à l'emploi. Bien entendu, ces composants valident l'information côté serveur, mais génèrent aussi tout le code Javascript nécessaire à une validation côté client (à condition, bien entendu, que le navigateur supporte l'exécution des scripts client).
Les principaux composants Ellipse de validation sont : <web:RequiredValidator>, <web:SameValidator> et le <web:RegularExpressionValidator> : nous allons les reprendre, un à un, dans la suite de ce document. Comme toujours, les explications qui vont suivre seront basées sur l'application de démonstration du Framework Ellipse.
<web:RequiredValidator>
<web:SameValidator>
<web:RegularExpressionValidator>
Si vous cherchez à faire quelque chose de simple, seule la page Web est à éditer pour lui adjoindre des composants de validation. Dans des cas plus complexes, vous pourriez avoir besoin de récupérer les composants de validation au niveau de la classe de page, mais nous n'aborderons pas cette possibilité dans ce chapitre. Un composant de validation est un composant Visuel (corelib.services.web.components.VisualComponent) : en effet, si le composant de saisie auquel il est assiocié n'est pas renseigné correctement, le composant de validation produira un message d'erreur. Il faut donc mettre en association le composant de validation avec le composant de saisie auquel il est associé : pour ce faire utilisez la propriété componentToValidate. La page suivante propose l'intégration de composants de validation sur un formulaire de saisie de login et de mot de passe.
01 <?xml version="1.0" encoding="ISO-8859-1" ?> 02 <web:Html xmlns:web="corelib.services.web.components" 03 codeBehind="corelib.services.web.samples.virtualcaddy.webpages.Login"> 04 <head> 05 <title>Logon screen</title> 06 <link rel="stylesheet" type="text/css" href="CssStyles.css" /> 07 </head> 08 <body> 09 <h1>Logon screen</h1> <br /> 10 11 <web:Form focus="txtLogin" method="post"> 12 <div align="center"> 13 Login : 14 <web:TextBox id="txtLogin" value="Malone" /> 15 <web:RequiredValidator componentToValidate="txtLogin" 16 errorMessage="Value is required" cssClass="Validator" /> 17 <br/> 18 19 Password : 20 <web:TextBox id="txtPassword" value="P@ssw0rd" type="password" /> 21 <web:RequiredValidator componentToValidate="txtPassword" 22 errorMessage="Value is required" cssClass="Validator" /> 23 <br /> <br/> 24 25 <web:Button id="btnConnect" value="Connect" /> <br /> 26 <web:OutputText id="lblResult" /> <hr /> 27 28 <div id="divTime" runAt="server"></div> 29 </div> 30 </web:Form> 31 </body> 32 </web:Html>
Notez, aussi, la présence des attributs errorMessage et cssClass. Le premier permet de définir le message d'erreur à produire en cas de non saisie du composant associé : ce message peut être internationnalisé (nous y reviendrons ultérieurement - vous pouvez aussi consulter la page LoginI18N.wp de l'application de démonstration, pour de plus amples informations). Le second permet d'appliquer une classe de styles CSS sur le message d'erreur produit. Pour de plus amples informations sur l'utilisation de CSS, je vous renvoie vers notre tutorial CSS.
ATTENTION : pour que la validation fonctionne aussi du côté client, il faut absolument utiliser le tag <web:Form> (comme cela est fait en ligne 11 de l'exemple ci-dessus). L'utilisation du tag HTML <form> ne déclenchera pas la validation du côté client.
Dans certains cas, il peut être utile de définir un bouton de soumission de formulaire, mais qui ne déclenche pas de validation du formulaire. Par exemple, un bouton d'annulation peut être associé à un gestionnaire d'événements pour effectuer une éventuelle redirection : dans ce cas, il serait dommage d'imposer une saisie correcte du formulaire. Pour obtenir un tel bouton, il suffit d'ajouter un attribut immediate="true" à votre bouton de formulaire.
01 <web:Button id="btnCancel" value="Annuler" immediate="true" />
Pour clore ce chapitre, je vous propose un petit exemple montrant l'utilisation des trois composants de validation Ellipse. Ce formulaire vous demande de saisir obligatoirement un login, qui doit être une adresse email syntaxique bien formée, ainsi qu'un mot de passe (il ne pourra être non renseigné). Ce mot de passe devra être saisie une seconde fois, afin de le confirmer.
Pour la saisie du login, nous utilisons un composant de type <web:RegularExpressionValidator>. Celui-ci requière la présence de l'attribut regularExpression : elle indiquera l'expression régulière à utiliser pour la validation. Pour de plus amples informations sur la mise en oeuvre d'expression régulière en Java, je vous renvois vers le site de Sun. Notez néanmoins, que le caractère . représente n'importe quel caractère et que le caractère + permet de répéter l'élément précédent au minimum une fois.
Pour imposer une saisie pour le mot de passe, un composant de type <web:RequiredValidator> est utilisé. Enfin, pour confirmer la saisie, un composant de validation de type <SameValidator> est utilisé. Ce dernier type de composant accepte, outre l'attribut componentToValidate, un autre attribut masterComponent. Si les textes saisis dans les deux composants web ne sont pas égaux, le message d'erreur est produit.
01 <?xml version="1.0" encoding="ISO-8859-1" ?> 02 <web:Html xmlns:web="corelib.services.web.components" 03 xmlns:demo="corelib.services.web.samples.virtualcaddy.webcomponents" 04 codeBehind="corelib.services.web.webapplications.WebPage"> 05 <head> 06 <title>Validator Sample</title> 07 <link rel="stylesheet" type="text/css" href="CssStyles.css" /> 08 <style> 09 .ValidatorError { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 <h1>Validator Sample</h1> <br /> 16 17 <web:Form method="post"> 18 <table style="width: 340" > 19 <tr> 20 <td class="Text" width="50%">Login (email):</td> 21 <td> 22 <web:TextBox id="txtLogin" cssStyle="width: 100%" /> 23 </td> 24 </tr> 25 <tr> 26 <td colspan="2" align="right" class="Text"> 27 <web:RegularExpressionValidator componentToValidate="txtLogin" 28 regularExpression=".+@.+\..+" 29 errorMessage="Please, insert your email" 30 cssClass="ValidatorError" /> 31 </td> 32 </tr> 33 <tr> 34 <td class="Text">Password:</td> 35 <td class="Text"> 36 <web:TextBox id="txtPassword1" type="password" cssStyle="width: 100%" /> 37 </td> 38 </tr> 39 <tr> 40 <td colspan="2" align="right" class="Text"> 41 <web:RequiredValidator componentToValidate="txtPassword1" 42 errorMessage="Please, insert your password" 43 cssClass="ValidatorError" /> 44 </td> 45 </tr> 46 <tr> 47 <td class="Text">Confirm password:</td> 48 <td class="Text"> 49 <web:TextBox id="txtPassword2" type="password" cssStyle="width: 100%" /> 50 </td> 51 </tr> 52 <tr> 53 <td colspan="2" align="right" class="Text"> 54 <web:SameValidator 55 componentToValidate="txtPassword2" masterComponent="txtPassword1" 56 errorMessage="Please, confirm your password" 57 cssClass="ValidatorError" /> 58 </td> 59 </tr> 60 <tr> 61 <td colspan="2"> </td> 62 </tr> 63 <tr> 64 <td colspan="2" align="center"> 65 <web:Button id="btnCreate" value="Confirmer" /> 66 <web:Button id="btnCancel" value="Annuler" immediate="true" /> 67 </td> 68 </tr> 69 <tr> 70 <td colspan="2"> </td> 71 </tr> 72 </table> 73 </web:Form> 74 75 </body> 76 </web:Html>
Dominique LIARD - © 2007..2010 SARL Infini Software - Tous droits réservés Les autres marques et les noms de produits cités dans ces documents sont la propriété de leurs détenteurs respectifs.