Vérifier si une valeur est un nombre
I. Présentation
Ce tutoriel a pour but de vous faire découvrir la fonction booléenne isNaN qui retourne True (vrai) lorsque la valeur n'est pas un nombre et qui retourne False (faux) lorsque la valeur en est un. Le nombre peut être entier ou décimal.
II. Procédure
Pour vérifier le fonctionnement de cette fonction, réalisons un exemple.
Dans cet exemple, il nous faut une page HTML qui devra contenir un champ de saisie où l'utilisateur devra saisir son poids, qui bien sûr devra être un nombre. La page contiendra également un bouton permettant d'envoyer les informations.
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM Name='Formulaire1'>
Votre poids <input type='text' Name='Poids' Value=''> kg
<input type='button' Name='Envoyer' Value='Envoyer'>
</FORM>
</BODY>
</HTML>
Nous avons maintenant une page HTML avec un champ de saisie et un bouton. Ajoutons maintenant du JavaScript pour contrôler l'information avant d'envoyer le formulaire.
Dans un premier temps, ajoutons une fonction JavaScript permettant de vérifier que le champ de saisie n'est pas vide. S'il est vide la fonction retournera un message d'alerte, sinon le formulaire sera envoyé. Complétez votre code avec le code ci-dessous.
<HTML>
<HEAD>
<script language='Javascript'>
function VerifierFormulaire()
{
if ((Formulaire1.Poids.value) == '')
{
alert('Vous devez saisir votre poids !') ;
}
else {
Formulaire1.submit() ;
}
}
</script>
</HEAD>
<BODY>
<FORM Name='Formulaire1'>
Votre poids <input type='text' Name='Poids' Value=''> kg
<input type='button' Name='Envoyer' Value='Envoyer' onClick='VerifierFormulaire()'>
</FORM>
</BODY>
</HTML>
Maintenant que, grâce au Javascript, nous pouvons déterminer si le formulaire est remplis ou non, il faut rendre la vérification plus pointilleuse et regarder si l’information saisie est bien un nombre. Le code en rouge est celui à ajouter au précédent.
<HTML>
<HEAD>
<script language='Javascript'>
function VerifierFormulaire()
{
if ((Formulaire1.Poids.value) == '')
{
alert('Vous devez saisir votre poids !') ;
}
else if (isNaN(Formulaire1.Poids.value) == false) {
Formulaire1.submit() ;
}
else if (isNaN(Formulaire1.Poids.value) == true) {
alert('Poids incohérent') ;
}
}
</script>
</HEAD>
<BODY>
<FORM Name='Formulaire1'>
Votre poids <input type='text' Name='Poids' Value=''> kg
<input type='button' Name='Envoyer' Value='Envoyer' onClick='VerifierFormulaire()'>
</FORM>
</BODY>
</HTML>
Notre exemple est terminé, vous êtes maintenant capable d'utiliser la fonction isNaN, qui est simple d'utilisation mais efficace.
