Développement d application web avec Visual Studio 2012 et ASP.NET. Tutoriel 5.1 : Validation

Transcription

1 L objectif de ce tutoriel est d utiliser les contrôles de validation afin de valider l inscription d un développeur à un site. Les informations suivantes doivent être validées : le nom et le prénom sont obligatoires. L Age doit être numérique et compris entre 18 et 50. Les mails et téléphones doivent respecter le format nécessaire et le langage de programmation doit être soit C# soit C++. Etape 1 Ajouter les contrôles de validation au formulaire L objectif de cette étape est d utiliser les contrôles «RequiredFieldValidator», «CompareValidator», «RangeValidator», «RegularExpressionValidator» et «CustomValidator» afin d intégrer la validation requise. 1. Le but du tutoriel est de permettre à des développeurs de s inscrire. Le développeur doit fournir les informations suivantes : Nom (obligatoire), Prénom (obligatoire), Age (entre 18 et 50), Langage (C# ou C++), Son mail et son numéro de téléphone portable. 2. Lancez VS Choisir Fichier -> Nouveau -> Application ASP.NET vide 4. Entrez «TestValidation» dans la zone «Nom» 5. Cliquez sur OK 6. Cliquez sur le bouton droit sur le projet «TestValidation» 7. Ajoutez une nouvelle forme appelée «Default.aspx» 8. Ouvrez «Default.aspx» en mode conception 9. Faites glisser un label dans la page et affectez «Nom :» à la propriété «Text» de ce libellé 10. A côté du libellé, glissez une zone de texte et affectez «txtnom» à la propriété «ID» 11. Faites glisser un «RequiredFieldValidator» à côté de «txtnom» avec les propriétés suivantes : (ErrorMessage = «Veuillez entrer votre nom», ControlToValidate= «txtnom» et 12. Insérez un saut de ligne en appuyant sur «Entrée» ou (<br/>) en mode source 13. Faites glisser un label dans la nouvelle ligne et affectez «Prénom :» à la propriété «Text» de ce libellé 14. A côté du libellé, glissez une zone de texte et affectez " txtprenom " à la propriété " ID " 15. Faites glisser un «RequiredFieldValidator» à côté de «txtprenom» avec les propriétés suivantes : (ErrorMessage = «Veuillez entrer votre prénom», ControlToValidate= «txtprenom» et 16. Insérez un saut de ligne en appuyant sur «Entrée» ou (<br/>) en mode source 17. Faites glisser un label dans la nouvelle ligne et affectez «Age :» à la propriété «Text» de ce libellé 18. A côté du libellé, glissez une zone de texte et affectez «txtage» à la propriété «ID» 19. Faites glisser un «RequiredFieldValidator» à côté de «txtage» avec les propriétés suivantes : (ErrorMessage = «Veuillez entrer votre age», ControlToValidate= «txtage» et 20. Faites glisser un «CompareValidator» à côté de «RequiredFieldValidator» que vous venez d ajouter avec les propriétés suivantes : (ErrorMessage = «L âge doit être une valeur numérique», ControlToValidate= «txtage» et 21. Affectez «DataTypeCheck» à la propriété «Operator» du CompareValidator que vous venez d ajouter 22. Affectez «Integer» à la propriété «Type» du CompareValidator que vous venez d ajouter 23. Faites glisser un «RangeValidayor» à côté de «CompareValidator» avec les propriétés suivantes : (ErrorMessage = «L age doit être inclus entre 18 et 50», ControlToValidate= «txtage» et 24. Affectez «18» et «50» respectivement aux propriétés «Minimum» et «Maximum» du RangeValidator que vous venez d ajouter 25. Affectez «Integer» à la propriété «Type» du «RangeValidator» que vous venez d ajouter 1 Copyright, Mostefai Mohammed Amine, ESI 2013

2 26. Insérez un saut de ligne en appuyant sur «Entrée» ou (<br/>) en mode source 27. Faites glisser un label dans la nouvelle ligne et affectez «Langage :» à la propriété «Text» de ce libellé 28. A côté du libellé, glissez une zone de texte et affectez «txtlanguage» à la propriété «ID» 29. Faites glisser un «CustomValidator» à côté de «txtlanguage» avec les propriétés suivantes : (ErrorMessage = «Veuillez entrer un langage correct», ControlToValidate= «txtlanguage» et 30. Double-cliquez sur le «CustomValidator», VS génère l évènement de validation et génère automatiquement l évènement ServerValidate 31. Modifiez le code de l évènement comme suit : protected void CustomValidator1_ServerValidate1(object source, ServerValidateEventArgs args) { args.isvalid = (args.value == "C#") (args.value == "C++"); 32. Ouvrez la page «Default.aspx» en mode source 33. Dans la section d entête (avant la balise body), insérez le code JavaScript suivant : <script type="text/javascript"> function ClientValidationHandler(source, args) { args.isvalid = (args.value == "C#") (args.value == "C++"); </script> 34. Ouvrez «Default.aspx» en mode conception 35. Cliquez sur le «CustomValidator» que vous venez d ajouter 36. Dans la propriété «ClientValidationFunction» entrez «ClientValidationHandler» 37. Insérez un saut de ligne en appuyant sur «Entrée» ou (<br/>) en mode source 38. Faites glisser un label dans la nouvelle ligne et affectez «Mail :» à la propriété «Text» de ce libellé 39. A côté du libellé, glissez une zone de texte et affectez «txtmail» à la propriété «ID» 40. Faites glisser un «RequiredFieldValidator» à côté de «txtmail» avec les propriétés suivantes : (ErrorMessage = «Veuillez entrer votre mail», ControlToValidate= «txtmail» et CssClass= «validationerror», Display= «Dynamic») 41. Faites glisser un «RegularExpressionValidator» à côté du dernier «RequiredValidator» avec les propriétés suivantes : (ErrorMessage = «Veuillez entrer un mail correct», ControlToValidate= «txtmail» et 42. Dans la fenêtre de propriétés, Cliquez sur la propriété «ValidationExpression», remarquez le bouton avec les pointillés 43. Cliquez sur le bouton avec pointillés, la fenêtre suivante apparaît : 2 Copyright, Mostefai Mohammed Amine, ESI 2013

3 44. Sélectionnez «Adresse Mail» 45. Cliquez sur «OK» 46. Insérez un saut de ligne en appuyant sur «Entrée» ou (<br/>) en mode source 47. Faites glisser un label dans la nouvelle ligne et affectez «N Mobile :» à la propriété «Text» de ce libellé 48. A côté du libellé, glissez une zone de texte et affectez «txtmobile» à la propriété «ID» 49. Faites glisser un " RegularExpressionValidator " à côté du dernier " RequiredValidator " avec les propriétés suivantes : (ErrorMessage = " Veuillez entrer un numéro correct ", ControlToValidate= " txtmobile " et CssClass= " validationerror ", Display= " Dynamic ") 50. Au début de la page, ajoutez un contrôle de type «ValidationSummary» 51. Entrez «validationsummary» dans la propriété «CssClass» du «ValidationSummary» 52. Ajoutez un saut de ligne et un bouton à la fin de la page 53. Le code de la page devrait être équivalent à celui-ci : /> <asp:validationsummary ID="ValidationSummary1" runat="server" CssClass="validationSummary" <asp:label ID="Label1" runat="server" Text="Nom : "></asp:label> <asp:textbox ID="txtNom" runat="server"></asp:textbox> <asp:requiredfieldvalidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtNom" Display="Dynamic" ErrorMessage="Veuillez entre le nom" CssClass="validationError"></asp:RequiredFieldValidator> <asp:label ID="Label2" runat="server" Text="Prénom : "></asp:label> <asp:textbox ID="txtPrenom" runat="server"></asp:textbox> <asp:requiredfieldvalidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPrenom" Display="Dynamic" ErrorMessage="Veuillez entrer le prénom" CssClass="validationError"></asp:RequiredFieldValidator> <asp:label ID="Label3" runat="server" Text="Age : "></asp:label> <asp:textbox ID="txtAge" runat="server"></asp:textbox> 3 Copyright, Mostefai Mohammed Amine, ESI 2013

4 <asp:requiredfieldvalidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="Veuillez donner votre age" CssClass="validationError"></asp:RequiredFieldValidator> <asp:comparevalidator ID="CompareValidator1" runat="server" ControlToValidate="txtAge" Display="Dynamic" ErrorMessage="L'age doit être une valeur numérique" Operator="DataTypeCheck" Type="Integer" CssClass="validationError"></asp:CompareValidator> <asp:rangevalidator ID="RangeValidator1" runat="server" ControlToValidate="txtAge" ErrorMessage="L'age doit être 18 et 50" MaximumValue="50" MinimumValue="18" Type="Integer" CssClass="validationError"></asp:RangeValidator> <asp:label ID="Label4" runat="server" Text="Langage : "></asp:label> <asp:textbox ID="txtLanguage" runat="server"></asp:textbox> <asp:customvalidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" OnServerValidate="CustomValidator1_ServerValidate1" ClientValidationFunction="ClientValidationHandler" ControlToValidate="txtLanguage" CssClass="validationError">Veuillez entrer un langage correct</asp:customvalidator> <asp:label ID="Label5" runat="server" Text="Mail : "></asp:label> <asp:textbox ID="txtMail" runat="server"></asp:textbox> <asp:requiredfieldvalidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RequiredFieldValidator">Veuillez entrer le mail</asp:requiredfieldvalidator> <asp:regularexpressionvalidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMail" CssClass="validationError" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">Veuillez entrer un mail valide</asp:regularexpressionvalidator> <asp:label ID="Label6" runat="server" Text="N Mobile : "></asp:label> <asp:textbox ID="txtMobile" runat="server"></asp:textbox> <asp:regularexpressionvalidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtMobile" CssClass="validationError" ErrorMessage="Veuillez entrer un numéro correct" ValidationExpression="^0(5 6 7)(\d{8)$"></asp:RegularExpressionValidator> <asp:button ID="Button1" runat="server" Text="Button" /> Etape 2 : Installer les paquets nécessaires à la validation côté client avec JQuery L objectif de cette étape est d installer les paquets «JQuery» et «AspNet.ScriptManager.JQuery» qui sont nécessaire à mettre en place la validation côté client. 1. Dans le menu cliquez sur «Outils Gestionnaire de Paquets Console du Gestionnaire de Paquets» 2. La fenêtre ci-dessous s affiche : 3. Dans la console, entrez «Install-Package JQuery» 4 Copyright, Mostefai Mohammed Amine, ESI 2013

5 4. Une fois le paquet JQuery installé, entrez «Install-Package AspNet.ScriptManager.JQuery» 5. Les paquets installés permettent de gérer la validation côté client avec JQuery Etape 3 : Ajouter du style aux composants de la validation L objectif de cette étape est d ajouter les règles CSS nécessaires à afficher les informations de validation en rouge et avec une taille de texte légèrement plus petite. 1. Dans le projet, créer une feuille de style appelée «Site.css» 2. Changez le code du CSS comme suit : body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; input { margin : 2px;.validationError { font-size: 0.8em; color: red;.validationsummary { margin : 5px; padding : 5px; background-color : red; color : white;.validationsummary ul { list-style : none; 3. Appliquez le style «Site.css» à la forme «Default.aspx» 4. Exécutez l application en appuyant sur «F5» 5 Copyright, Mostefai Mohammed Amine, ESI 2013

6 6 Copyright, Mostefai Mohammed Amine, ESI 2013