Tutoriel 5.1–Validation

L’objectif de ce tutoriel (module 5) 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

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.

• Lancez VS 2012
• Choisir Fichier -> Nouveau -> Application ASP.NET vide
• Entrez « TestValidation » dans la zone « Nom »
• Cliquez sur OK
• Cliquez sur le bouton droit sur le projet « TestValidation »
• Ajoutez une nouvelle forme appelée « Default.aspx »
• Ouvrez « Default.aspx » en mode conception
• Faites glisser un label dans la page et affectez « Nom : » à la propriété « Text » de ce libellé
• A côté du libellé, glissez une zone de texte et affectez « txtNom » à la propriété « ID »
• Faites glisser un « RequiredFieldValidator » à côté de « txtNom » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre nom », ControlToValidate= « txtNom » et CssClass= « validationError », Display= « Dynamic »)
• Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source
• Faites glisser un label dans la nouvelle ligne et affectez « Prénom : » à la propriété « Text » de ce libellé
• A côté du libellé, glissez une zone de texte et affectez " txtPrenom " à la propriété " ID "
• Faites glisser un « RequiredFieldValidator » à côté de « txtPrenom » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre prénom », ControlToValidate= « txtPrenom » et CssClass= « validationError », Display= « Dynamic »)
• Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source
• Faites glisser un label dans la nouvelle ligne et affectez « Age : » à la propriété « Text » de ce libellé
• A côté du libellé, glissez une zone de texte et affectez « txtAge » à la propriété « ID »
• Faites glisser un « RequiredFieldValidator » à côté de « txtAge » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer votre age », ControlToValidate= « txtAge » et CssClass= « validationError », Display= « Dynamic »)
• 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 CssClass= « validationError », Display= « Dynamic »)
• Affectez « DataTypeCheck » à la propriété « Operator » du CompareValidator que vous venez d’ajouter
• Affectez « Integer » à la propriété « Type » du CompareValidator que vous venez d’ajouter
• 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 CssClass= « validationError », Display= « Dynamic »)
• Affectez « 18 » et « 50 » respectivement aux propriétés « Minimum » et « Maximum » du RangeValidator que vous venez d’ajouter
• Affectez « Integer » à la propriété « Type » du « RangeValidator » que vous venez d’ajouter
• Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source
• Faites glisser un label dans la nouvelle ligne et affectez « Langage : » à la propriété « Text » de ce libellé
• A côté du libellé, glissez une zone de texte et affectez « txtLanguage » à la propriété « ID »
• Faites glisser un « CustomValidator » à côté de « txtLanguage » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer un langage correct », ControlToValidate= « txtLanguage » et CssClass= « validationError », Display= « Dynamic »)
• Double-cliquez sur le « CustomValidator », VS génère l’évènement de validation et génère automatiquement l’évènement ServerValidate
• 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++");

        }

• Ouvrez la page « Default.aspx » en mode source
• 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>

• Ouvrez « Default.aspx » en mode conception
• Cliquez sur le « CustomValidator » que vous venez d’ajouter
• Dans la propriété « ClientValidationFunction » entrez « ClientValidationHandler »
• Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source
• Faites glisser un label dans la nouvelle ligne et affectez « Mail : » à la propriété « Text » de ce libellé
• A côté du libellé, glissez une zone de texte et affectez « txtMail » à la propriété « ID »
• 7. 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 »)
• Faites glisser un « RegularExpressionValidator » à côté du dernier « RequiredValidator » avec les propriétés suivantes : (ErrorMessage = « Veuillez entrer un mail correct », ControlToValidate= « txtMail » et CssClass= « validationError », Display= « Dynamic »)
• Dans la fenêtre de propriétés, Cliquez sur la propriété « ValidationExpression », remarquez le bouton avec les pointillés
• Cliquez sur le bouton avec pointillés, la fenêtre suivante apparaît :

• Sélectionnez « Adresse Mail »
• Cliquez sur « OK »
• Insérez un saut de ligne en appuyant sur « Entrée » ou (<br/>) en mode source
• Faites glisser un label dans la nouvelle ligne et affectez « N° Mobile : » à la propriété « Text » de ce libellé
• A côté du libellé, glissez une zone de texte et affectez « txtMobile » à la propriété « ID »
• 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 ")
• Au début de la page, ajoutez un contrôle de type « ValidationSummary »
• Entrez « validationSummary » dans la propriété « CssClass » du « ValidationSummary »
• Ajoutez un saut de ligne et un bouton à la fin de la page
• Le code de la page devrait être équivalent à celui-ci :

        <asp:ValidationSummary ID="ValidationSummary1" runat="server" CssClass="validationSummary" />

        <br />

        <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>

        <br />

        <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>

        <br />

        <asp:Label ID="Label3" runat="server" Text="Age : "></asp:Label>

        <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>

        <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>

        <br />

        <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>

        <br />

        <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>

        <br />

        <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>

        <br />

        <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.

• Dans le menu cliquez sur « Outils –> Gestionnaire de Paquets –> Console du Gestionnaire de Paquets »
• La fenêtre ci-dessous s’affiche :

• Dans la console, entrez « Install-Package JQuery »
• Une fois le paquet JQuery installé, entrez « Install-Package AspNet.ScriptManager.JQuery »
• 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.

• Dans le projet, créer une feuille de style appelée « Site.css »
• 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;

    }

• Appliquez le style « Site.css » à la forme « Default.aspx »
• Exécutez l’application en appuyant sur « F5 »