Accueil

Traduction

Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Contrôle de saisie avec la gestion des exceptions

Une exception en JavaScript c'est une erreur qui se produit en cours d'exécution. On dit que l'erreur déclenche une exception ou que l'erreur lève une exception.

Pour gérer les erreurs il faut utiliser la structure try ... catch ....

Je vous montre aussi dans ce chapitre que désormais et puisque HTML5 est bien implémenté par les différents navigateurs, il est souvent possible de gérer les contrôles de saisie uniquement avec le HTML (donc de faire l'économie d'un script) en utilisant toutes les innovations de la version 5 en matière de formulaire

Pour tout savoir les formulaires avec HTML5 & CSS3

La structure try ... catch ...

Exemple de script sans gestion des erreurs

Donc script sans utilisation de try ... catch ...

Le code de la page web (extrait)

Le rendu

Saisissez 40 : le programme affiche que vous êtes nés en 1984

Saisissez 4O (le chiffre 4 puis la lettre O : le programme affiche que vous êtes né en 2000 ...
Il y a donc une erreur mais laquelle ?

Le navigateur considère en effet que vous avez saisi 4 car la fonction parseInt() est très permissive et parvient à convertir en entier du moment que les premièrs caractères saisis sont des chiffres.

Même thème avec gestion de l'erreur

Donc avec emploi cette fois de la structure try ... catch ...

Le code

Dans le code HTML une balise P identifiée "message" (et vide de tout contenu) a été ajoutée.

Dans le script notez l'emploi de l'instruction throw qui génère un message d'erreur personnalisé si la saisie dans "age" n'est pas une suite de chiffres.
Ce message est capturé par le bloc catch et affiché dans la balise P identifiée "message".
L'instruction if (test) throw(expression) permet donc de créer des messages d'erreurs personnalisés qui sont ensuite capturés dans le bloc catch.

Le rendu

Saisissez 40 : le programme affiche que vous êtes nés en 1984

Saisissez 4O (le chiffre 4 puis la lettre O : le programme n'affiche pas de résultat abérrant mais affiche le message : "vous n'avez pas saisi un entier".

Gestion des erreurs - autres exemples

Dans les deux exemples qui suivent il y aussi gestion des éventuelles erreurs de saisie mais cette fois les saisies se font dans le cadre de champs de formulaire.

Premier exemple

L'utilisateur doit saisir dans le premier champ d'un formulaire une valeur numérique compris entre 5 et 10. Une erreur de saisie éventuelle doit lui être signalée.

Le code de la page

Comme dans l'exemple précédent le message d'erreur personnalisé est injecté dans l'élément P identifié "message".

Le rendu

Pensez au HTML5

La version 5 de HTML évite souvent le recours à la programmation JS.
Mais attention les champs de saisie doivent être inclus dans le conteneur FORM et le bouton de commmande doit être de type "submit" sinon les contrôles de saisie HTML (grâce aux attribut required & pattern) ne seront pas disponibles.

Le code (avec uniquement du HTML) :

Observez la feuille de style interne pour formater les champs de saisie.

Notez bien les attributs des champs dont required (saisie obligatoire) et placeholder(légande de saisie).
Dans un champ de type number on ne peut saisir qu'une suite de chiffres (donc on ne peut saisir un nombre décimal).
L'élément BUTTON doit être de type submit.
Lors de la soumission il faut qu'il y ait aussi appel d'une fonction JS d'où la syntaxe particulière de l'élément FORM : <form on submit = "instruction JS" >
Les ID des champs sont facultatifs puisqu'il n'y a plus de script avec des instructions faisant référence à ces ID.

Le rendu :

Si soumission exécution de l'instruction JS alert(). Et la soumission n'est possible que si les champs sont correctement renseignés.

Il est possible de saisir un décimal dans un champ de type "number" à condition de rajouter l'attribut step ='any'.

Deuxième exemple

L'utilisateur saisit un pseudo qui doit comprendre entre 8 et 16 caractères alphanumériques (chiffres ou lettres) ; lettres en majuscules ou minuscules.
C'est l'occasion de faire une "piqure de rappel" sur les expression régulières.

Le code

Notez bien le gabarit à respecter : ^[0-9A-z]{8,16}$"

Ce motif précise qu'il faut saisir entre 8 et 16 chiffres ou lettres (majuscules et minuscules). En effet la lettre A est en majuscule et la lettre z en minuscule. Donc la plage de lettres autorisées couvre les majuscules et minuscules.

Le rendu

Saisissez des pseudos trop courts (moins de 8 caractères) OU des pseudos avec des symboles interdits (*,!, ? , etc.) ou des lettres accentuées.
Observez le message d'erreur généré à chaque fois.
Si aucun message n'est affiché c'est que le pseudo est enfin correct.

Solution HTML5

Comme dans le thème précédent je vous propose une autre solution basée sur le HTML5.
L'attribut pattern de la balise INPUT peut avoir pour valeur une expression régulière.
Le code (uniquement du HTML mais du 5 !) :

Notez bien les attributs des INPUT en particulier pattern ="expression régulière".
Dans le deuxième champ on peut saisir des espaces (le blanc après A-z).
Les ID des champs deviennent inutiles puisqu'il n'y a plus de script donc d'instructions qui font référence à ces ID.
Lors de la soumission il faut qu'il y ait aussi appel d'une fonction JS d'où la syntaxe particulière de l'élément FORM : <form on submit = "instruction JS" >

Le rendu :

Si soumission exécution de l'instruction JS alert().
Et la soumission n'est possible que si les deux champs sont correctement renseignés.

Pour en savoir plus

Dans ce tuto JS il y a tout un chapitre qui vous explique comment simplifier le code du script en utilisant toutes les nouveautés de HTML5 & CSS3 en matière de formulaire.
JS et les formulaires