Quelques validations avec HTML5, jQuery et ASP.NET

La validation est un aspect important de la programmation d'un formulaire Web.

La validation doit comprendre trois volets :

  • Dès que l'usager voit le formulaire, il doit connaître les éléments de validation qui seront effectués : * devant les informations obligatoires, texte qui indique le format attendu pour un téléphone, etc. Ces éléments peuvent être affichés à l'aide de libellés, à l'aide de bulles d'aide ou encore à l'aide de watermarks.

    Indications visuelles des validations qui seront faites

  • Une validation doit être effectuée côté client afin que l'usager soit informé des éléments à corriger dès que l'information est entrée. Cette validation peut être effectuée à l'aide d'attributs HTML5, de JavaScript ou de contrôles serveur de validation ASP.NET.
  • Et finalement la validation doit être effectuée côté serveur afin d'assurer que les informations invalides ne puissent pas être acceptées dans le cas où l'usager aurait désactivé JavaScript sur son navigateur. Les contrôles serveur de validation se chargent d'effectuer la validation côté serveur mais le développeur doit prendre quelques précautions pour empêcher l'enregistrement des informations en cas de valeurs non valides. Il est à noter que les validations HTML5 auront lieu même si JavaScript est désactivé.

▼Publicité

Longueur maximale d'une chaîne de caractères

Lorsque vous saisissez une chaîne de caractères dans le but de l'enregistrer dans votre base de données, il est important que sa longueur ne dépasse pas la taille maximale du champ.

Pour assurer que la chaîne de caractères saisie ne soit pas trop longue, on peut simplement ajouter l'attribut MaxLength à la balise <asp:TextBox>.

Ex : si on saisit un titre qui sera enregistré dans un champ de type NVARCHAR(50) : 

ASP.NET

<asp:TextBox ID="textBoxTitre" runat="server" MaxLength="50" />

L'ajout de cet attribut créera un attribut HTML maxlength. Important : cet attribut existait déjà en HTML 4. Il est donc supporté par les navigateurs les plus utilisés. 

Voici le code HTML généré :

HTML

<input name="textBoxTitre" type="text" maxlength="50" id="textBoxTitre" />

Ainsi, si l'usager tente d'entrer un nombre de caractères supérieur à la limite permise, les caractères excédants ne seront simplement pas saisis. Il n'y aura donc pas de chance que l'enregistrement fasse planter le programme puisque la base de données recevra 50 caractères au maximum.

Dans l'exemple précédent, si l'usager entre 51 caractères, le 51e caractère n'apparaîtra pas à l'écran.

Valider une entrée numérique

Les valeurs numériques peuvent être validées à l'aide de différentes techniques. Les techniques seront différentes pour les valeurs entières et pour les valeurs décimales.

Valider une entrée numérique à l'aide du CompareValidator ou du RegularExpressionValidator

Nombre entier

Voici une méthode simple pour assurer que la valeur saisie soit un nombre entier.

Ex :

Fichier .aspx (ASP.NET)

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

<asp:CompareValidator ID="validationNumero" runat="server" ControlToValidate="textBoxNumero"

    ErrorMessage="Vous devez entrer un nombre" CssClass="erreurvalidateur" Operator="DataTypeCheck" 

    SetFocusOnError="True" Type="Integer" />

Résultat à l'écran :

Erreur de type

Nombre avec décimales

Et voici comment valider une entrée avec décimales.

Fichier .aspx (ASP.NET)

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

<asp:RegularExpressionValidator ID="validationPrix" runat="server" ControlToValidate="textBoxPrix" 

    ValidationExpression="^\d{1,3}(\.\d{1,2})?$" ErrorMessage="format : 999.99" CssClass="erreurvalidateur" 

    Display="Dynamic"  />

Résultat à l'écran :

Erreur nombre avec décimales

Valider une entrée numérique à l'aide de HTML5

Le HTML5 met à la disposition des développeurs Web une série de nouvelles balises et de nouveaux attributs pour des balises existantes. Parmi celles-ci, les attributs type et pattern appliqués à une balise <input> permettent de valider les entrées faites par l'internaute.

L'avantage de la validation par le HTML5, c'est qu'il est beaucoup plus simple à mettre en oeuvre. Par contre, la validation n'aura pas lieu sur un navigateur ne supportant pas le HTML5 alors les développeurs doivent tenir compte de ce fait.

Il est possible d'ajouter un attribut type et/ou pattern à un contrôle serveur Web simplement en ajoutant ces attributs dans tout contrôle serveur Web qui génère une balise HTML <input>, comme par exemple la balise <asp:TextBox>.

Nombre entier

La façon la plus simple de valider un nombre entier avec HTML5 est d'utiliser l'attribut type="number". Ceci changera l'apparence du contrôle. À droite de la boîte de saisie, on aura des flèches haut et bas permettant d'augmenter ou de diminuer le nombre entré.

Ex :

Fichier .aspx (ASP.NET)

<asp:TextBox ID="textBoxNumero" runat="server" type="number" />

Résultat à l'écran :

input type='number'

Une autre façon intéressante de valider un nombre entier consiste à utiliser l'attribut pattern. Cette fois, le contrôle de saisie demeure inchangé.

L'attribut pattern utilise une expression régulière à laquelle l'entrée doit correspondre pour être considérée valide. Un nombre entier est composé de nombres faisant partie de la plage [0-9]. Si le nombre de chiffres composant le nombre n'est pas important, on fera suivre d'un +, ce qui indique qu'il doit y avoir au moins un chiffre.

L'attribut title permettra de spécifier le format attendu. Ce texte sera affiché sous le message "Veuillez respecter le format requis." apparaissant automatiquement pour les entrées incorrectes lors de la validation du formulaire.

Cette technique présente quelques inconvénients, en plus du fait de ne pas être supportée par tous les navigateurs :

  • L'affichage du message d'erreur se fait dans une bulle, ce qui est passablement différent du format utilisé par les validateurs ASP.NET. Il n'est donc pas recommandé d'utiliser l'attribut pattern si vous utilisez les validateurs ASP.NET.
  • Le texte affiché ne peut pas être modifié. Vous aurez donc toujours le « Veuillez respecter le format requis. ». La seule façon de personnaliser le message consiste à ajouter un attribut title qui s'affichera sous ce message.
  • Parfois, la bulle ne s'affiche pas au bon endroit. Il devient difficile pour l'usager de savoir quelle entrée est en erreur.
  • Contrairement aux validateurs ASP.NET, la validation a lieu lorsqu'on clique sur un bouton et non immédiatement après avoir entré l'information dans le contrôle. Ceci est moins intéressant au niveau ergonomique.

Ex :

Fichier .aspx (ASP.NET)

<asp:TextBox ID="textBoxNumero" runat="server" pattern="[0-9]+" title="Vous devez entrer un nombre" />

Résultat à l'écran :

input pattern

Nombre avec décimales

Les nombres avec décimales pourront être validés à l'aide de l'attribut pattern. 

Dans l'exemple suivant, on utilisera le point décimal. Comme le point a une signification particulière dans les expressions régulières, on le fera précéder d'un caractère d'échappement (\). 

Ex :

Fichier .aspx (ASP.NET)

<asp:TextBox ID="textBoxNumero" runat="server" pattern="[0-9]+\.[0-9]+"

    title="Vous devez entrer un nombre avec point décimal" />

Si on souhaite utiliser une virgule décimale, on n'aura pas besoin de faire précéder la virgule par un caractère d'échappement.

Ex :

Fichier .aspx (ASP.NET)

<asp:TextBox ID="textBoxNumero" runat="server" pattern="[0-9]+,[0-9]+" 

    title="Vous devez entrer un nombre avec virgule décimale" />

Valider la valeur d'un nombre devant faire partie d'une plage avec le RangeValidator

Le contrôle RangeValidator permet de s'assurer que la valeur entrée soit située entre telle et telle valeur.

Ex :

Fichier .aspx(ASP.NET)

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

<asp:RangeValidator runat="server" ID="validationPlageNumero" ControlToValidate="textBoxNumero"

    ErrorMessage="Veuillez entrer une valeur située entre 1 et 10" CssClass="erreurvalidateur"

    MinimumValue="1" MaximumValue="10" Type="Integer" />

Valider une date

Il existe plusieurs méthodes pour valider le format et la valeur d'une date.

Format de la date

Validation à l'aide d'un CompareValidator

Voici un exemple de validateur qui vérifie si la date entrée est au format AAAA-MM-JJ. Si la date entrée ne respecte pas ce format, le message "AAAA-MM-JJ" sera affiché.

Fichier .aspx (ASP.NET)

<asp:CompareValidator ID="validatorDateNaissance" runat="server" Type="Date" Operator="DataTypeCheck" 

   ControlToValidate="textBoxDateNaissance" ErrorMessage="AAAA-MM-JJ" >

</asp:CompareValidator>

Validation à l'aide de jQuery

jQuery offre un contrôle permettant de sélectionner une date dans un petit calendrier. L'utilisation de ce contrôle garantit que la date sera dans un format valide, en autant que le JavaScript soit activé sur le navigateur.

Ex :

Fichier .aspx (ASP.NET)

<head ...>

   ...

   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

   <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>

   <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/i18n/jquery-ui-i18n.min.js"></script>

   <script>

       $(function() {

           $.datepicker.setDefaults($.datepicker.regional['fr']);

           $(".datepicker").datepicker({

               dateFormat: 'yy-mm-dd'

           });

       })

   </script>

   ...

</head>

<body...>

   ...

   <asp:TextBox ID="textBoxDate" runat="server" CssClass="datepicker saisiedate" />

   ...

</body>

Saisie d'une date avec jQuery datepicker

Quelques explications :

  • HTML

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

    Charge une feuille de style pour déterminer l'apparence du calendrier.

  • HTML

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    Script définissant les fonctions jQuery.

  • HTML

    <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>

    Script permettant à jQuery de réagir lorsque des fonctionnalités ne sont pas prises en charge par le navigateur.

  • HTML

    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    jQuery ui est un ensemble de fonctionnalités bâties par-dessus jQuery. C'est là que le calendrier datepicker est défini.

  • HTML

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/i18n/jquery-ui-i18n.min.js"></script>

    Traduction du calendrier.

  • HTML

    $(document).ready(function () {

       ...

    });

    ou, plus simplement :

    HTML

    $(function() {

       ...

    });

    Ces deux notations sont équivalentes. Le code placé ici sera exécuté lorsque la page sera entièrement chargée. 

  • HTML

    $.datepicker.setDefaults($.datepicker.regional['fr']);

    Choisit la langue d'affichage, telle que définie dans le fichier de traduction.

  • HTML

     dateFormat: 'yy-mm-dd'

    Définit le format d'affichage de la date une fois choisie dans le calendrier.

  • HTML

    CssClass="datepicker saisiedate"

    La classe datepicker fait en sorte que le calendrier sera affiché quand on voudra éditer la date. La seconde classe (saisiedate) est optionnelle. Elle est définie dans le css de la page. Ici, elle spécifie la largeur de la boîte de saisie.

Valeur de la date

Validation à l'aide d'un CompareValidator

Voici un exemple de validateur qui vérifie si la date entrée est supérieure à la date d'aujourd'hui.  

Fichier .aspx (ASP.NET)

<asp:CompareValidator ID="validatorDateRendezVous" runat="server" Type="Date" 

   ValueToCompare="<%# DateTime.Today.ToShortDateString() %>" ControlToValidate="textBoxDateRendezVous" 

   ErrorMessage="La date doit être supérieure à la date d'aujourd'hui" >

</asp:CompareValidator>

S'assurer qu'aucun traitement n'est effectué côté serveur si les contrôles serveur de validation indiquent une donnée invalide

Les contrôles serveur de validation se chargent de générer le code JavaScript qui effectuera les validations côté client. Mais si l'internaute désactive le JavaScript dans son navigateur, il faut s'assurer que les validations soient tout de même effectuées.

Dans les faits, avec les contrôles serveur de validation, les validations côté serveur sont effectuées même si le JavaScript est désactivé. La preuve : dans le cas d'un RequiredFieldValidator, on verra le texte du validateur s'afficher si le champ est laissé à blanc.

Cependant, si on désire effectuer un traitement seulement lorsque les données sont valides, il faut ajouter un test : if (Page.IsValid). Par exemple, un formulaire qui permet d'ajouter des données ne devra pas effectuer l'ajout si la validation des données n'est pas réussie.

Le meilleur endroit pour ajouter ce test est le gestionnaire d'événement du contrôle servant à soumettre le formulaire. Ce contrôle peut être de type Button, ImageButton, LinkButton, etc.

Ex :

Fichier .aspx.cs (ASP.NET avec C#)

protected void buttonSoumettre_Click(object sender, EventArgs e)

{

    if (Page.IsValid) 

    {

        // effectuer le traitement sur les données

    }

}

Une autre approche consiste à ajouter systématiquement le code suivant au début du gestionnaire d'événement d'un contrôle de soumission de formulaire :

Fichier .aspx.cs (ASP.NET avec C#)

protected void buttonSoumettre_Click(object sender, EventArgs e)

{

    if (!Page.IsValid) 

    {

        return;

    }

    // effectuer le traitement sur les données

}

Pour plus d'information

« Javascript - L'objet RegExp ». Comment ça marche. http://www.commentcamarche.net/contents/585-javascript-l-objet-regexp

« HTML5 <input> pattern Attribute ». w3schools. http://www.w3schools.com/html5/att_input_pattern.asp

« HTML5Pattern ». HTML5Pattern. http://html5pattern.com/

« HTML5 Forms Input Types, Attributes And New Elements – Demos, Tips And Tricks ». Robert's talk. http://robertnyman.com/2011/08/16/html5-forms-input-types-attributes-and-new-elements-demos-tips-and-tricks/

« HTML5 Forms ». Robert's talk. http://robertnyman.com/html5/forms/attributes.html

« JavaScript RegExp Object ». w3schools. http://www.w3schools.com/js/js_obj_regexp.asp

« Datepicker ». jQuery. http://jqueryui.com/datepicker/

« .Net Validators – Don’t Forget Page.IsValid ». Jardine Software. https://www.jardinesoftware.net/2012/03/31/net-validators-dont-forget-page-isvalid/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories