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.

soit il ne traite pas l'exception et dans ce cas son script plante !
soit il traite l'exception et dans ce cas son script affiche l'erreur mais surtout il se poursuit !

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)

...
<button onclick ="mafonction()">Appel script</button>
<script>
function mafonction()
{
		var age = prompt("saisir votre âge sous forme d'un entier"); 
		var age = parseInt(age); 
		var annee_naiss = 2024 - age ; 
		alert("Vous êtes né en :" + annee_naiss); 
}	
...

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

...
<button onclick ="mafonction()">Appel script</button>
<p id ="message"></p>
<script>
function mafonction()
{
	const message = document.getElementById("message");
	try 
	{
		var age = prompt("saisir votre âge sous forme d'un entier"); 
		if(isNaN(age)) throw "vous n'avez pas saisi un entier" ;
		var age = parseInt(age); 
		var annee_naiss = 2024 - age
		alert("Vous êtes né en :" + annee_naiss); 
	}
	catch(err) 
	{
		message.innerHTML = err;
	}
} // fin fonction	
...

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

...
<input id="nombre" type="text" placeholder ="saisir un numérique entre 5 et 10">
<br><input id ="nom" type ="text" placeholder ="saisir un nom">
<br><button onclick ="mafonction()">Validez </button>
<p id ="message"></p>
<script>
function mafonction() {
  const message = document.getElementById("message");
  var nombre = document.getElementById("nombre").value;
  message.innerHTML = "" ; //pour écraser l'éventuel message d'erreur précédent
  try {
    if(nombre == "") throw "est vide";
    if(isNaN(nombre)) throw "ne contient pas un nombre ";
	if(nombre > 10) throw "trop grand";
    if(nombre < 5) throw "trop petit";
   }
  catch(err) {message.innerHTML = "Le contenu du premier champ " + err;  }
 } // fin fonction

 ...

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

Le rendu

ne pas remplir le premier champ
le remplir avec une suite de lettres
le remplir avec un entier supérieur à 10
le remplir avec un entier inférieur à 5
le remplir avec un entier compris entre 5 et 10

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) : ... <style> input[type =text] {width : 60%;} input[type =number] {width : 40%;} </style> </head> <body> <form onsubmit ="alert('Saisie correct')"> <input type = 'number' required min = '5' max = '10' placeholder ="saisir un numérique entre 5 et 10" > <br><input type ="text" required placeholder ="saisir un nom"> <br><button type ="submit">Validez </button> </form> ...

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

...
<input id="pseudo" type="text" placeholder ="saisir un pseudo entre 8 et 16 caractères alphanumériques">
<br><input id ="nom" type ="text" placeholder ="saisir un nom">
<br><button onclick ="mafonction()">Validez </button>
<p id ="message"></p>
<script>
function mafonction() 
{
	var message = document.getElementById("message");
	var pseudo = document.getElementById("pseudo").value; 
	message.innerHTML ="";  // effacer éventuel message d'erreur devenu obsolète
	var reg = new RegExp("^[0-9A-z]{8,16}$");
	try {if(!reg.test(pseudo)) throw "le pseudo " + pseudo + " n'est pas valide " ; }
	catch(err) { message.innerHTML = err; } 
} // fin fonction
...

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 !) : ... <style> input[type =text] {width : 60%;} </style> </head> <body> <form onsubmit ="alert('Saisie correcte')"> <input type="text" required pattern ="[0-9A-z]{8,16}" placeholder ="Saisir un pseudo entre 8 et 16 caractères alphanumériques"> <br><input type ="text" required pattern= "[A-z ]{2,30}" placeholder ="Saisir un nom"> <br><button type ="submit">Validez</button> </form>

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

Traduction

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

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Contrôle de saisie avec la gestion des exceptions

La structure try ... catch ...

Exemple de script sans gestion des erreurs

Le code de la page web (extrait)

Le rendu

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

Le code

Le rendu

Gestion des erreurs - autres exemples

Premier exemple

Le code de la page

Le rendu

Pensez au HTML5

Deuxième exemple

Le code

Le rendu

Solution HTML5

Pour en savoir plus