ASP.Net : validation côté client

Ronald Vasseur

La validation des données saisies par l'utilisateur est aujourd'hui un incontournable des applications web et c'est une bonne chose car cela n'a pas toujours été le cas. On distingue généralement deux types de validation en ASP.Net. La validation côté client et la validation côté serveur. La validation côté client correspond à une validation des données avant qu'elles soient envoyées vers le serveur. Vu que l'on effectue cette validation directement dans le navigateur et qu'un aucun code n'est exécuté sur le serveur on utilise généralement JavaScript pour cette opération.

- Titre : ASP.Net : validation côté client

- Auteur : Ronald Vasseur

- Parution : 5 novembre 2008

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2008 Ronald Vasseur. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 1. Présentation de la validation en ASP.Net

- 2. Les contrôles de validation ASP.Net

- 3. La validation côté client

- 4. Conclusion

- Ressources

- Liens vers le MSDN

- Liens vers Developpez.com

1 - Présentation de la validation en ASP.Net

La validation des données saisies par l'utilisateur est aujourd'hui un incontournable des applications web et c'est une bonne chose car cela n'a pas toujours été le cas. On distingue généralement deux types de validation en ASP.Net. La validation côté client et la validation côté serveur.

La validation côté client correspond à une validation des données avant qu'elles soient envoyées vers le serveur. Vu que l'on effectue cette validation directement dans le navigateur et qu'un aucun code n'est exécuté sur le serveur on utilise généralement JavaScript pour cette opération.

La validation côté serveur quand a elle intervient après le postback, quand les données ont été envoyées vers le serveur. Cette validation est elle réalisée par du code .Net, C# ou VB .Net par exemple.

Cette double validation, côté client et serveur, est une nécessité pour éviter la corruption, volontaire ou non, des données lors de leur transport sur le réseau. C'est étape est incontournable et fait partie de la sécurisation de base d'une application, encore plus lorsqu'il s'agit d'une application exposée sur Internet.

ASP.Net offre une solution particulièrement complète en matière de validation au sens large (côté client et côté serveur) qui est de plus très bien intégrée. En effet, ASP.Net inclus des contrôles serveur spécialisés (champs requis, validation par expression régulière, validation personnalisée, plage de validation…) qui permettent d'effectuer une validation côté serveur très aisément ainsi que d'afficher des messages d'erreur à l'utilisateur tout aussi facilement. La grande force de ces contrôles de validation est qu'en plus de fonctionner côtés serveur il est possible d'utiliser exactement les mêmes contrôles pour réaliser la validation côté client. Cette fonctionnalité ne relève pas de la magie mais de la capacité de ces contrôles à générer du code JavaScript qui sera exécuté pour effectuer la validation côté client.

2 - Les contrôles de validation ASP.Net

- RequiredFieldValidator: comme son nom l'indique ce contrôle de validation permet de vérifier qu'une valeur à été définie pour un champ donné. Si un champ associé à un RequiredFieldValidator n'a pas de valeur alors la validation échouera.

- RangeValidator : récupère la valeur d'un contrôle et vérifie que celle-ci se trouve bien dans la plage prédéfinie. Les bornes minimales et maximales peuvent être des types suivants : string, int, double, currency ou date.

- RegularExpressionValidator: ce contrôle permet de définir une expression régulière qui servira à valider la valeur contenue dans le contrôle associé. Ce contrôle de validation est vraiment très puissant puisqu'il bénéficie des expressions régulières qui permettent par exemple valider des adresses email, des adresse IP ou toute autre expression répondant à un schéma donné.

- CompareValidator: ce contrôle de validation permet de comparer la valeur de deux champs donnés s'ils sont des types suivants : string, int, double, currency ou date.

- CustomValidator: ce contrôle permet de réaliser une validation customisée pouvant prendre en compte des conditions métiers ou tout autre besoin spécifique. Ce contrôle permet également de réaliser une validation côté client en fournissant le code JavaScript adéquat.

- ValidationSummary: ce composant permet de regrouper et de spécifier les conditions d'affichages des messages indiquant des erreurs de validation à l'utilisateur.

Voici un extrait d'un fichier .aspx montrant comment associer un contrôle de validation (champs requis) à une TextBox :

Exemple d'un contrôle de validation

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
EnableClientScript="true"
ControlToValidate="TextBox1"
ErrorMessage="Ce champs est requis">
</asp:RequiredFieldValidator>
</div>
</form>
</body>
</html>

3 - La validation côté client

Venons en à la problématique de cet article, comment activer ou non dynamiquement les validations côté client pour certains contrôles. Une chose très fréquente dans une interface d'application web est le fait d'activer ou non certains champs de manière dynamique à l'aide de JavaScript. Cela peut devenir un vrai problème si par exemple une TextBox est indiquée comme un champ requis dans le RequireFieldValidator associé, mais que pour diverses raisons (en fonction des données saisies par l'utilisateur par exemple) celle-ci est désactivée, la validation va alors échouer bien que ce contrôle ne devrait plus être validé.

Remarque : chaque contrôle de validation ASP.Net possède une propriété qu'il est possible d'initialiser déclarativement depuis le fichier .aspx ou alors depuis le code .Net à proprement parler, il s'agit de la propriété " EnableClientScript ". Si cette propriété est positionnée à " True " alors un bout de code JavaScript sera généré pour réaliser automatiquement la validation côté client en plus de la validation côté serveur.

Une fois de plus ASP.Net a été bien pensé. Il est possible de désactiver dynamiquement des contrôles de validation côté client grâce à JavaScript bien que ceux-ci aient été positionnés comme actif dans la page initiale. Pour des raisons de sécurité évidentes cette désactivation de la validation côté client ne modifie et n'altère en rien la validation qui sera effectuée côté serveur. La validation côté serveur garde donc toute sa prévalence. Il appartiendra donc au développeur de mettre en place le code pour débrayer également cette validation (required field par exemple) côté serveur en fonction de l'état de l'application.

En fonction des besoins spécifiques de votre application web il pourra être nécessaire d'activer ou de désactiver des contrôles de validation côté client par l'intermédiaire de JavaScript. Voici comment procéder. Cette opération est simple à réaliser, il faut utiliser la méthode ValidatorEnable() dans le code JavaScript. Cette fonction propose plusieurs surcharges. Voici comment procéder :

Débrayage d'un contrôle de validation côté client

<script language="javascript" type="text/jscript">
function disableControl()
{
// Desactive la validation (positionner 'true' pour activer la validation)
ValidatorEnable(document.getElementById('<%=RequiredFieldValidator1.ClientID %>'), false);
}
</script>

4 - Conclusion

La validation côté serveur est une chose aisée grâce aux contrôles de validation ASP.Net, mais comme nous l'avons vu dans cet article il est facile d'activer en même temps, sans devoir produire un code spécifique, la validation côté client. Il est en plus aisé d'activer ou de débrayer la validation côté client grâce à un simple appel d'une fonction JavaScript.

Ressources

Liens vers le MSDN

Contrôle de validation en ASP.Net
La validation des entrées utilisateur en ASP.Net

Liens vers Developpez.com

Mes articles
Mon blog
Les articles des autres rédacteurs
La rubrique .Net de Developpez.com