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

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>Appel script !</button>
<script>
document.querySelector('button').onclick =function()
{
	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 HTML

...
<button>Appel script</button>
<h3 id ="message"></h3>
...

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

Le script

document.querySelector('button').onclick =function()
{
	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 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 H3 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 vont suivre il y aura 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 HTML

...
<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>Validez </button>
<h3 id ="message"></h3>
...

Le script

document.querySelector('button').onclick =function()
{
  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 anonyme

Comme dans l'exemple précédent le message d'erreur personnalisé est injecté dans l'élément H3 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 parfois 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 "navigateur" (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 devenus inutiles puisqu'il n'y a plus de script qui pourrait référencer les éléments via leur 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 HTML

...
<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>Validez </button>
<h3 id ="message"></h3>

Le script

document.querySelector('button').onclick =function()
{
	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 uniquement du code HTML (pas de script).
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.
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().
La soumission n'est possible que si les deux champs sont correctement renseignés.

Traduction

Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework jQuery.js

Framework Vue.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 HTML

Le script

Le rendu

Gestion des erreurs - autres exemples

Premier exemple

Le code HTML

Le script

Le rendu

Pensez au HTML5

Deuxième exemple

Le code HTML

Le script

Le rendu

Solution HTML5