 |
 Contrôler les saisies dans un formulaire |
|
|
|
|
|
Le but de ce script est de vérifier tout un tas de saisies possible dans un
formulaire comme les adresses e-mail, les dates, les codes postaux, et si le visiteur a bien coché un bouton radio,
une case à cocher, sélectionné un élément dans une liste...
Bref, il permet de s'assurer que les données saisies sont de vraies données (si tant est que ce soit possible ;-) |
|
|
|
|
|
Le script est en fait un 'package' de plusieures fonctions s'appelant les unes les autres.
Sur chaque champs dont on souhaite vérifier la cohérence, on place un appel à la fonction de
vérification en lui donnant comme paramètres le nom du formulaire, le nom du champ, le type de
données que l'on accepte et les nombres maximum et minimum de caractères à autoriser.
Cette fonction utilise les 'expressions régulières'. Les expressions régulières sont une
méthode de recherche de caractères héritée du langage 'Perl', et qui en reprend la puissance,
mais aussi la complexité. Pour chaque type de données (code postal, adresse e-mail...) on recherchera une
chaine de caractères spécifique, typique (5 chiffres quelqu'ils soient).
Suivant que l'on trouve ou pas cette chaine, on laissera passer le visiteur au champ suivant ou pas en lançant une
fonction annexe de blocage.
Pour la vérification des champs vides, on utilisera un lot de 4 fonctions !
La première est alimentée par la liste des champs que l'on souhaite tester dans la page et lance en
dernière action la validation du formulaire (sous condition).
En fait cette fonction appelle, pour chaque champ qui lui est soumis, la même fonction qui va elle effectuer
réellement la vérification. Cette fonction teste le type de champ auquel elle a à faire et teste si
la valeur du champ est vide (cas des champs 'text', 'textarea' et
'password'), ou si c'est le premier élément de la liste qui est
sélectionné (cas des 'select'), si l'état
(status) est vrai ou faux (cas des 'checkbox').
Le cas des boutons radio est légèrement différent, on est obligé d'utiliser une autre fonction
pour les tester mais le fonctionnement reste à peu près identique.
A chaque test, si le visiteur n'a pas coché la case, s'il n'a pas choisi un élément dans une liste...,
on alimente une variable avec les noms des champs vides et on signale, par le passage d'une variable de 0 à 1
qu'il ne faudra pas valider le formulaire (ceci est invisible à l'utilisateur).
Lorsque la dernière action se lance, la validation du formulaire, la fonction de validation teste tout d'abord si
la variable de blocage (0 ou 1) est 'bloquée' (1), auquel cas elle envoie une alerte contenant tous les noms des
champs qui ont été détectés comme 'vide'.
Et voilà !! |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
// Début de la partie non-spécifique à la page
// Fonction de blocage de la saisie si elle n'est pas conforme
function bloque(formulaire,champ) {
// Création d'un raccourci pour manipuler le champ
var controle = eval('document.' + formulaire + '.' + champ);
// On se place sur le champ incriminé
controle.focus();
// On sélectionne le contenu pour faciliter la reprise de la saisie
controle.select();
}
// Fonction de contrôle des champs vides
// Début du message qui sera affiché en cas d'un ou plusieurs champ(s) vide(s)
var mess = "Les champs suivants sont necessaires au traitement de votre demande :\n";
// Copie pour réinitialisation
var mess_init = "Les champs suivants sont necessaires au traitement de votre demande :\n";
// Variable marquant l'erreur (0 : tout va bien, 1 : blocage demandé)
var necessaire = 0;
function vide(formulaire,champ,alerte) {
// Création d'un raccourci pour manipuler le champ à tester
var controle = eval('document.' + formulaire + '.' + champ);
// Si c'est un champ 'text'
if ( controle.type == 'text' ) {
// Et que la valeur du champ comporte moins de 1 caractère (vide)
if ( controle.value.length < 1 ) {
// On ajoute l'intitulé du champ dans le message d'erreur
mess += alerte;
mess += "\n";
// On marque qu'il ne faut pas valider le formulaire
necessaire = 1;
}
}
// Si c'est un champ de type mot de passe
if ( controle.type == 'password' ) {
if ( controle.value.length < 1 ) {
mess += alerte;
mess += "\n";
necessaire = 1;
}
}
// Si c'est un champ de type texte multilignes
if ( controle.type == 'textarea' ) {
if ( controle.value.length < 1 ) {
mess += alerte;
mess += "\n";
necessaire = 1;
}
}
// Si c'est une liste
if ( controle.type == 'select-one' ) {
// Si c'est le premier élément qui est sélectionnée (élément vide à indiquer dans le HTML)
if ( controle.options[0].selected ) {
mess += alerte;
mess += "\n";
necessaire = 1;
}
}
// Si c'est une case à cocher
if ( controle.type == 'checkbox' ) {
// Quand elle est cochée, l'état est 'true', ici on cherche l'inverse (false)
if (!controle.status) {
mess += alerte;
mess += "\n";
necessaire = 1;
}
}
}
// Fonction pour le test des boutons radio
function vide_radio(formulaire,champ,alerte) {
// Création d'un raccourci pour manipuler le champ à tester
var controle = eval('document.' + formulaire + '.' + champ);
// On déclare par défaut que les champs ne sont pas cochés,
var non = "hs";
for ( i = 0; i < controle.length; i++ ) {
// Si on trouve un bouton coché, on le marque
if (controle[i].status) {
non = "ok";
}
}
// Si on n'a pas marqué un champ comme 'coche' (ok)
if ( non != "ok" ) {
mess += alerte;
mess += "\n";
necessaire = 1;
}
}
// Fonction de validation du formulaire
function resultat(formulaire) {
// Si on a marqué qu'au moins un champ était vide
if ( necessaire == 1 ) {
// Affichage du message d'erreur avec tous les champs en erreur
alert(mess);
}
// Si aucun champ n'est vide
if ( necessaire == 0 ) {
var formu = eval('document.' + formulaire);
// Validation du formulaire
formu.submit();
}
// Quoi qu'il arrive, on ré-initialise le message d'erreur pour permettre un autre passage des tests
mess = mess_init;
necessaire = 0;
}
// Fonction de contrôle de validité de la saisie
// Création d'une variable pour marquer s'il y a incohérence de saisie ou pas
var probleme = 0;
function validite(formulaire,champ,format,mini,maxi) {
// Initialisation de la variable
probleme = 0;
// Les différents tests possibles :
// On affecte à la variable 'RE' le test d'expression régulière souhaité
// A : alphabétique
if ( format == "A" ) { RE = /^([A-Za-z]+[ ]*[-]*[A-Za-z]*)+$/;}
// AN : alphanumérique
if ( format == "AN" ) { RE = /^[A-Za-zàâäéèêëîïôùûç\s,'0-9\-]+$/;}
// N : numérique
if ( format == "N" ) { RE = /^\d+$/;}
// CP : code postal français (5 chiffres)
if ( format == "CP" ) { RE = /^\d{5}$/;}
// D : Date (xx/xx/xx ou xx/xx/xxxx ou xx-xx-xx ou xx-xx-xxxx)
if ( format == "D" ) { RE = /^\d{2}([\/]|[\-])+\d{2}([\/]|[\-])+\d{2}(\d{2})*$/;}
// EMAIL : email
if ( format == "EMAIL" ) { RE = /^[A-Za-z0-9\.\-_]+[@][A-Za-z0-9\-\.]+[\.][A-Za-z][A-Za-z][A-Za-z]?$/;}
// Création d'un raccourci pour manipuler le champ à tester
var controle = eval('document.' + formulaire + '.' + champ);
// On ne fera les tests que si le champ est rempli d'au moins un caractère (pas vide)
if (controle.value.length > 0) {
// Si on ne trouve pas dans le champ l'expression régulière recherchée
if (!RE.test(controle.value)) {
// Envoi d'une alerte
alert('Votre saisie est incorrecte.');
// On marque que la saisie n'est pas cohérente
probleme = 1;
}
// Tests de longueur du champ (nombre de caractères saisis)
// Si il a été spécifié '0', le test n'est pas effectué
if ( mini != 0 ) {
// Si la longueur de la saisie est inférieure au minimum demandé
if ( controle.value.length < mini ) {
// Envoi d'une alerte
alert('Vous devez saisir au moins ' + mini + ' caracteres.');
probleme = 1;
}
}
// Si la longueur de la saisie est supérieure au maximum demandé
if ( maxi != 0 ) {
if ( controle.value.length > maxi ) {
alert('Vous ne devez pas saisir plus de ' + maxi + ' caracteres.');
probleme = 1;
}
}
// Si on a marqué qu'il y avait un problème
if ( probleme == 1 ) {
// On active le blocage du champ
bloque(formulaire,champ);
}
}
}
// Fonction de vérification d'une plage de nombres (entre X et Y)
function check_num(formulaire,champ,plancher,plafond) {
// Création d'un raccourci pour manipuler le champ à tester
var controle = eval('document.' + formulaire + '.' + champ);
// Si la valeur de la saisie est inférieure au plancher demandé
if ( controle.value < plancher ) {
// Envoi d'une alerte
alert('Votre saisie ne doit pas etre inferieure a ' + plancher + '.');
// On active le blocage du champ
bloque(formulaire,champ);
}
// Si la valeur de la saisie est supérieure au plafond demandé
if ( controle.value > plafond ) {
alert('Votre saisie ne doit pas etre superieure a ' + plafond + '.');
bloque(formulaire,champ);
}
}
// Fonction pour vérifier la cohérence de deux saisies de mot de passe
// Cette fonction se déclenche à partir du second champ uniquement
function check_pw(formulaire,champ1,champ2) {
// Création de deux raccourcis pour manipuler les champ à comparer
var prems = eval('document.' + formulaire + '.' + champ1);
var deuze = eval('document.' + formulaire + '.' + champ2);
// Si le premier champ n'est pas rempli
if (!prems.value) {
// Envoi d'une alerte
alert('Vous n\'avez pas saisi votre mot de passe');
// On active le blocage du champ
bloque(formulaire,champ1);
}
// Si le premier champ est rempli
else {
// Si la saisie des deux champ est différente
if ( prems.value != deuze.value ) {
// Envoi d'une alerte
alert('La confirmation de votre mot de passe n\'est pas exacte.');
// Ré-initialisation des deux champs
deuze.value = "";
prems.value = "";
// On active le blocage du champ
bloque(formulaire,champ1);
}
}
}
// Fin de la partie non-spécifique à la page
// Début de la partie spécifique à la page
// Fonction pour tester les champs vides (une ligne par champ)
// Pour autoriser un champ vide, ne pas le référencer dans la liste
function check_vide() {
vide_radio('formulaire','civilite','- Civilite');
vide('formulaire','nom','- Nom');
vide('formulaire','prenom','- Prenom');
vide('formulaire','codepostal','- Code postal');
vide('formulaire','mail','- Adresse e-mail');
vide('formulaire','password','- Votre mot de passe');
vide('formulaire','password2','- Confirmation du mot de passe');
vide('formulaire','etudes','- Votre niveau d\'etudes');
vide('formulaire','jour','- Jour de naissance');
vide('formulaire','mois','- Mois de naissance');
vide('formulaire','annee','- Annee de naissance');
vide('formulaire','avis','- Votre avis sur le formulaire est incorrect ;-)');
// Validation (sous conditions) du formulaire
resultat('formulaire');
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<form name="formulaire">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td width="10"></td>
<td><input type="radio" name="civilite"> M. <input type="radio" name="civilite"> Mme <input type="radio" name="civilite"> Mlle</td>
</tr>
<tr>
<td align="right">Nom</td>
<td></td>
<!-- On veut ici une saisie alpha-numérique de 40 caractères ou moins -->
<td><input type="text" name="nom" size="35" OnBlur="validite('formulaire','nom','AN',0,40);"></td>
</tr>
<tr>
<td align="right">Prénom</td>
<td></td>
<td><input type="text" name="prenom" size="35" OnBlur="validite('formulaire','prenom','AN',0,40);"></td>
</tr>
<tr>
<td align="right">Code postal</td>
<td></td>
<!-- On veut ici une saisie type 'code postal français' -->
<td><input type="text" name="codepostal" size="10" OnBlur="validite('formulaire','codepostal','N',5,5);"></td>
</tr>
<tr>
<td align="right">Adresse e-mail</td>
<td></td>
<!-- On veut ici une saisie type 'adresse e-mail' de 50 caractères ou moins -->
<td><input type="text" name="mail" size="35" OnBlur="validite('formulaire','mail','EMAIL',0,50);"></td>
</tr>
<tr>
<td align="right">Mot de passe (3 à 8 caractères)</td>
<td></td>
<!-- On veut ici une saisie alpha-numérique entre 3 et 8 caractères inclus -->
<td><input type="password" name="password" size="17" OnBlur="validite('formulaire','password','AN',3,8);"></td>
</tr>
<tr>
<td align="right">Confirmation du mot de passe</td>
<td></td>
<!-- On teste la concordance entre ce champ et le précédent -->
<td><input type="password" name="password2" size="17" OnBlur="check_pw('formulaire','password','password2');"></td>
</tr>
<tr>
<td align="right">Votre niveau d'études</td>
<td></td>
<!-- Pour rendre obligatoire la sélection d'un élément de la liste il faut impérativement commencer par une ligne 'vide' (vide ou avec 'Choisissez'...) -->
<td><select name="etudes">
<option>
<option>BEPC
<option>BEP
<option>BAC
<option>BAC +2
<option>> BAC +2</select>
</td>
</tr>
<tr>
<td align="right">Votre date d'anniversaire</td>
<td></td>
<td><select name="jour">
<option>
<option>01
<option>02
<option>...
<option>31</select>
<select name="mois">
<option>
<option>01
<option>02
<option>...
<option>12</select>
<!-- On ne veut que des chiffres, entre 1920 et 2001 inclus (pas de test de nombre de caractères sur la première fonction pour éviter une 'boucle' (essayez vous verrez) -->
<input type="text" name="annee" size="5" OnBlur="validite('formulaire','annee','N',0,0);
check_num('formulaire','annee',1920,2001)"></td>
</tr>
<tr>
<td></td>
<td colspan="3"><input type="checkbox" name="avis"> J'aime ce formulaire.</td>
</tr>
<tr>
<!-- On lance le test des champs vides -->
<td align="right"><input type="button" value="Valider" OnClick="check_vide();"></td>
<td colspan="2"></form></td>
</tr>
</table>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Ce formulaire n'est envoyé nulle part, vous pouvez mettre ce que vous voulez.
|
|
|
|
|
|
|
|
|
|
|
|
|
