|
Et maintenant fini de rire ! Le vrai cerveau ce sont les scripts, et ce n'est pas avec les quelques petits machins en rouge que vous avez rajouté dans les lignes HTML de votre mesquin formulaire que le travail va se faire.
Je rassure tout de suite les flemmards, pas besoin de tout récrire, un simple copier/coller fera l'affaire, mais si vous voulez aussi comprendre ce que vous faites, il va falloir dépenser un peu de phosphore.
- Premier script: teste_vide(objet,texte,image led)
function teste_vide(objet,texte,led)
{
with (objet) // Pour l'objet en paramètre
{
if (value==null || value=='') // Si valeur numérique est nulle
{ // ou si pas de caractère, alors
document.images[led].src="LEDVoff.gif"; // Éteint la led verte
document.images['Led_Envoi'].src="LEDRon.gif"; //Allume la led rouge
flag[led]=false; // Mémorise faux pour ce champ
if (texte!="") {alert(texte);} // Si il y a du texte, l'affiche
objet.select(); // Resélectionne le champ
objet.focus(); // Resélectionne le contenu
return false; // Retourne faux
}
else // Sinon
{
flag[led]=true; // Mémorise OK pour ce champ
document.images[led].src="LEDVon.gif"; // Allume la led
if (flag['Led_Nom']==true && flag['Led_Age']==true // Si autres champs OK
&& flag['Led_Email']==true)
{ // Passe led Envoi en vert
document.images['Led_Envoi'].src="LEDVon.gif";
}
return true; // Retourne vrai
}
}
}
Quelques explications supplémentaires ne feront pas de mal.
- Le "//" indique à javascript que tout ce qui suit est un commentaire et ne doit pas être exécuté, commenter un programme permet de s'y retrouver plus facilement.
- Le "==" indique à javascript qu'il doit tester la variable et non pas lui affecter la valeur qui suit (ce que l'on fait avec juste "=").
- Le "||" signifie "OU", si un test OU l'autre est vrai, ALORS la suite (entre les "{}") est exécutée, sinon le programme continue après le "}".
- Si la valeur du champ est nulle, on éteint la led verte du champ concerné (au cas ou elle aurait été allumée précédemment) et on allume la led rouge du bouton d'envoi, puisqu'au moins un champ n'est plus valide.
- On mémorise ensuite l'état de la led dans le tableau de nom "flag" (drapeau en français) avec flag[led]=false;
- Si il y a du texte à afficher, on l'affiche dans une requête de type "alert".
- On resélectionne et active ensuite le champ incriminé.
- Et on retourne l'état du champ (non valide) avec return false; nous verrons pourquoi plus loin.
- Si la valeur du champ n'est pas nulle, on mémorise l'état de la led dans le tableau de nom "flag" avec flag[led]=true;
- On allume la led verte du champ en question.
- On teste si tous les champs sont valides, le "&&" signifie "ET", si oui on passe la led envoi en vert.
- Et on retourne l'état du champ (valide) avec return true;
- Second script: teste_valeur(objet,texte,min,max,led)
function teste_valeur(objet,texte,min,max,led)
{
with (objet)
{
valeur=parseInt(value); // Lit la valeur et compare avec les limites
if (parseInt(min)!=min || valeur<min || parseInt(max)!=max
|| valeur>max || value!=valeur)
{
document.images[led].src="LEDVoff.gif"; // Si la valeur est hors limites
document.images['Led_Envoi'].src="LEDRon.gif"; // Comme script 1
flag[led]=false;
if (texte!="") {alert(texte);}
objet.select();
objet.focus();
return false;
}
else // Si elle est dans les limites on fait comme dans le script 1
{
flag[led]=true;
document.images[led].src="LEDVon.gif";
if (flag['Led_Nom']==true && flag['Led_Age']==true
&& flag['Led_Email']==true)
{
document.images['Led_Envoi'].src="LEDVon.gif";
}
return true;
}
}
}
Il y a très peu de différences par rapport au script précédent, ici on lit la valeur numérique du champ grâce à la fonction parseInt(), "value" étant tout simplement la propriété du contenu du champ (objet document.forms[0].texts[1].value), celle du minimum et celle du maximum, puis on contrôle simplement si la valeur du champ se trouve entre ces limites et si ce n'est pas du texte grâce à l'astuce diabolique: "|| value!=valeur" (la valeur numérique d'un texte est "0", et 0 est forcément différent du texte).
- Test adresse E-Mail: teste_email(objet,texte,image led)
function teste_email(objet,texte,led)
{
with (objet)
{
apos=value.indexOf("@"); // Cherche position de "@"
dotpos=value.lastIndexOf("."); // Cherche dernière position de "."
lastpos=value.length-1; // Contrôle si l'adresse est vraisemblable
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{
document.images[led].src="LEDVoff.gif"; // Comme scripts 1 et 2
document.images['Led_Envoi'].src="LEDRon.gif";
flag[led]=false;
if (texte) {alert(texte);}
objet.select();
objet.focus();
return false;
}
else // Comme script 1 et 2
{
flag[led]=true;
document.images[led].src="LEDVon.gif";
if (flag['Led_Nom']==true && flag['Led_Age']==true
&& flag['Led_Email']==true)
{
document.images['Led_Envoi'].src="LEDVon.gif";
}
return true;
}
}
}
Même chose ici que ci-dessus, sauf que l'on s'intéresse uniquement à la présence et à la position respective des caractère "@" et "." et au nombre de caractères du dernier groupe qui doit être compris entre deux et trois.
Je n'entrerai pas plus loin dans le détail pour le moment pour ne pas devenir trop rasoir ou vous larguer.
- Test de validation: validation(objet)
function validation(objet)
{
with (objet)
{
if (teste_vide(Nom,'Indiquez votre nom s\'il vous plaît.','Led_Nom')==false)
{
Nom.select(); Nom.focus(); return false;
}
if (teste_valeur(Age,'L\'indication de l\'âge est obligatoire.',7,77,'Led_Age')==false)
{
Age.select(); Age.focus(); return false;
}
if (teste_email(Email,'Vous oubliez d\'indiquer votre adresse E-Mail.','Led_Email')==false)
{
Email.select(); Email.focus(); return false;
}
return true;
}
}
Ici on teste simplement tour à tour chaque champ à valider du formulaire (chaque fonction retournant true ou false) et si tous sont corrects on retourne true (vrai) et cela permet l'exécution complète du bouton submit, sinon le premier champ incorrect trouvé on sélectionne le champ incriminé et on retourne false (faux) pour arrêter l'envoi du message par submit.
- Remize à zéro des leds et mémoires: raz(objet)
function raz(objet)
{
with (objet)
{
document.images['Led_Nom'].src="LEDVoff.gif";
flag['Led_Nom']=false;
document.images['Led_Age'].src="LEDVoff.gif";
flag['Led_Age']=false;
document.images['Led_Email'].src="LEDVoff.gif";
flag['Led_Email']=false;
document.images['Led_Envoi'].src="LEDRon.gif";
}
}
On éteint chaque led et on remet la mémoire de celles-ci à zéro (en fait à vide, avec =''), ces mémoires servent uniquement à allumer la led envoi en vert si tous les champs sont bien remplis, les champs eux sont automatiquement vidés (ou remis à la valeur de défaut) grâce au HTML par le navigateur.
- Vous croyez peut-être que c'est enfin terminé ?
Et bien non, mais ne jetez pas l'éponge, vous y êtes presque, il reste une dernière bricole à faire, quand on utilise un tableau, c'est comme à la douane, il faut le déclarer, de plus vous l'avez peut-être déjà oublié, mais les routines ci dessus sont à placer entre des marqueurs <SCRIPT> et </SCRIPT> entre <HEAD> et </HEAD>.
Ajoutez-y donc la routine suivante: init()
function init()
{
flag=new Array(3);
flag['Led_Nom']=false;
flag['Led_Age']=false;
flag['Led_Email']=false;
document.forms[0].Nom.select();
document.forms[0].Nom.focus();
}
Qui sert uniquement à déclarer un tableau de nom "flag" et de nombre de cases égal à 4 ! (et oui le tableau part de zéro, faites le compte) et à sélectionner et mettre en évidence le premier champ du formulaire à remplir.
S'il y a des gens qui ne dorment pas encore, ils se seront rendu compte qu'il n'y a encore rien qui exécute cette fonction, bravo !
Dernier bout de programme (et c'est vraiment le dernier): <BODY onLoad="init();"> </BODY>, ouf !!!
Voici en exclusivité galactique, voire universelle (sauf si quelqu'un me l'a piqué) le squelette complet de ce projet, vous pourrez le copier/coller mais vous devrez supprimer les images ou changer les noms de fichier, ainsi que l'adresse de destination du formulaire.
|
