Validation de formulaires

Ce projet a pour but d'illustrer différentes techniques de validation de formulaire. Valider un formulaire consiste à vérifier qu'il a été correctement complété : l'utilisateur a-t-il bien introduit une donnée dans tous les champs obligatoires et les informations fournies sont-elles plausibles. Que l'on ne se fasse pas d'illusion, même les procédures de validation les plus élaborées n'empêcheront jamais un utilisateur de se tromper et d'introduire des données fausses ou incomplètes, mais il est néanmoins possible d'appliquer des critères formels qui peuvent détecter des fautes de distraction.

La validation des données peut être exécutée du côté serveur ou du côté client. L'exécution du côté serveur présente comme désavantage une surcharge de travail pour le serveur ainsi qu'un trafic accru sur le réseau. Elle présente par contre l'avantage d'être plus fiable car on ne peut jamais être sûr que le navigateur client acceptera d'exécuter des scripts.

Il n'en reste pas moins que ce projet va nous permettre d'étudier plus en détail le fonctionnement des formulaires.

Envoi des données d'un formulaire

L'attribut action

Les données d'un formulaire sont transmises à une page web dont le nom est indiqué dans l'attribut action de la balise <form>. Au début du web, cette page était une application du type CGI (ang. Common Gateway Interface) qui permettait la transmission par un serveur web de données en provenance d'exécutables classiques.

<form action="../cgi/reservation.exe" >
</form>

Cette solution était très intéressante car elle permettait de partir de l'existant, tant en ce qui concerne les applications que les données. Puis les SGBD se sont adaptés au WEB et les langages de scripts côté serveur sont apparus, de sorte que l'on utilise aujourd'hui des pages php ou asp.

<form action="reservation.php" >
</form>

Techniquement, rien n'oblige à ce que cette page web soit une application côté serveur. Si vous ne disposez pas d'un serveur web, une simple page html fera l'affaire pour tester vos formulaires. Simplement, cette page ne sera pas capable d'accéder aux données transmises. Notez que la méthode utilisée doit être get (voir ci-dessous) si vous utilisez une page html comme action.

<form action="merci.html" >
</form>

L'attribut method

Cet attribut indique comment les données du formulaire doivent être transmises à la page action. Il existe deux méthodes : get et post.

La méthode get

La méthode get attache les données à l'url de la page action dans une chaîne de caractères encodée url. Les données sont donc visibles et peuvent facilement interceptées. Cette méthode est utilisée par les moteurs de recherche.

Login

Password


<form name="abonnement" method="get" action="merci.html">
<p>Login <input type="text" name="login_txt" /> </p>
<p>Password <input type="password" name="password_txt" /></p>
<p><input type="hidden" value="bulgroz" /></p>
<p><input type="submit" value="Envoyer" /></p>
</form>

La méthode post

La méthode post "emballe" les données du formulaire dans l'en-tête HTTP de la requête et présente ainsi plus de fiabilité.

Login

Password


<form name="abonnement" method="post" action="merci.php">
<p>Login <input type="text" name="login_txt" /> </p>
<p>Password <input type="password" name="password_txt" /></p>
<p><input type="hidden" value="bulgroz" /></p>
<p><input type="submit" value="Envoyer" /></p>
</form>

L'attribut onsubmit

L'attribut onsubmit indique le gestionnaire d'événement à déclencher lorsque l'on enfonce le bouton submit du formulaire. Ce gestionnaire d'événement renvoie un résultat booléen (true ou false) en fonction duquel le navigateur détermine si oui ou non la requête doit être transmise au serveur.

Par exemple, personne n'écrirait jamais ceci :

<form onsubmit="return false">
</form>

car tout le monde a compris que le formulaire ne sera jamais transmis.

La fonction de validation

En fait, onsubmit est utilisé pour renvoyer la valeur de retour d'une fonction qui renvoie une valeur booléenne.

<form onsubmit="return mfValidation(this)">
</form>

Le paramètre "this" est un mot réservé de JavaScript qui désigne l'objet dans lequel il est utilisé. Dans le cas présent, this représente le formulaire lui-même car il est utilisé dans la balise <form>.

La fonction de validation reçoit donc tout le formulaire dans la variable paramètre. Il s'agit ici de la variable f (comme formulaire), mais tout autre nom de variable valide aurait convenu :

function mfValidation(f) {

Instructions

}

Il ne reste plus qu'à écrire les instructions de validation. Nous partons d'un formulaire simple illustré ci-dessous :

Un formulaire simple

Le formulaire comporte trois champs de saisie texte nommés respectivement nom_txt, prenom_txt, email_txt. Tous trois sont obligatoires. Pour améliorer la lisibilité de la fonction, on commence par transférer les valeurs de ces trois champs dans trois variables :

var nom = f.nom_txt.value ;
var prenom = f.prenom_txt.value ;
var email = f.email_txt.value ;

Il est alors facile de tester si le champ est vide en vérifiant que la variable est égale à une chaîne vide (pour rappel, une chaîne vide se note "").

if (nom=="") {
alert("Le champ nom est obligatoire") ;
ok = false ;
}
if (prenom=="") {
alert("Le champ prénom est obligatoire") ;
ok = false ;
}

La vérification de l'adresse email peut faire l'objet d'une procédure plus élaborée. Comme pour les champs nom et prenom, nous commençons par vérifier si le champ n'est pas resté vide :

if (email=="") {
alert("Le champ e-mail est obligatoire") ;
ok = false ;
}

Si ce n'est pas le cas, nous pouvons vérifier que l'information fournie ressemble à une adresse email, donc qu'elle comporte bien un arrobas et un point.

if (email=="") {
alert("Le champ e-mail est obligatoire") ;
ok = false ;
}
else if (email.indexOf("@") == -1) {
alert("Il n'y a pas d'arrobas dans cette adresse") ;
ok = false ;
} else if (email.indexOf(".") == -1) {
alert("Il n'y a pas de point dans cette adresse") ;
ok = false ;
}

Il reste à vérifier que l'arrobas précède le point, donc que sa position dans l'adresse est inférieure à celle du point :

if (email.indexOf("@") > email.indexOf(".") ) {
alert("Bizarre, le point vient avant l'arrobas") ;
ok = false ;

}

On peut regretter que la méthode indexOf soit appelée 2 fois pour l'arrobas et 2 fois pour le point. Pour éviter ce double appel, on peut utiliser la syntaxe ci-dessous, qui pourrait effrayer le débutant mais dont la logique est pourtant fréquemment utilisée, même dans d'autres langages comme par exemple PHP

if (email=="") {
alert("Le champ e-mail est obligatoire") ;
ok = false ;

}
else if ( (p1 = email.indexOf("@")) == -1) {

alert("Il n'y a pas d'arrobas dans cette adresse") ;
ok = false ;

}
else if ((p2 = email.indexOf(".")) == -1) {

alert("Il n'y a pas de point dans cette adresse") ;
ok = false ;

} else if (p1 > p2 ) {

alert("Bizarre, le point vient avant l'arrobas") ;
ok = false ;

}

Dans beaucoup de langages de programmation (C, Java, JavaScript, PHP), l'opération d'affectation renvoie un résultat qui n'est autre que la valeur affectée à la variable. Ce résultat peut être utilisé dans une autre opération d'affectation ou une instruction de sortie. Ainsi, après exécution de cette instruction :

x = y = 3 ;

x vaut 3 car le résultat de l'affectation

y = 3

vaut 3 !

En écrivant

if ( (p1 = email.indexOf("@")) == -1)

on affecte à p1 la position de l'arrobas dans la variable email, puis on vérifie si cette cette valeur est égale à -1. On fait de même avec p2 puis il est facile de comparer p1 et p2.

function mfValider(f) {
ok = true ;
var nom = f.nom_txt.value ;
var prenom = f.prenom_txt.value ;
var email = f.email_txt.value ;
if (nom=="") {
alert("Le champ nom est obligatoire") ;
ok = false ;
}
if (prenom=="") {
alert("Le champ prénom est obligatoire") ;
ok = false ;
}
if (email=="") {
alert("Le champ e-mail est obligatoire") ;
ok = false ;
}
else if ((p1 = email.indexOf("@")) == -1) {
alert("Il n'y a pas d'arrobas dans cette adresse") ;
ok = false ;
} else if (( p2 = email.indexOf(".")) == -1) {
alert("Il n'y a pas de point dans cette adresse") ;
ok = false ;
}

return ok ;
}