nom_image_bouton0.ext_ext_image_bouton : format du bouton sans passage de souris dessus
--> nom_image_bouton1.ext_ext_image_bouton : format du bouton si passage de souris dessus
--> nom_image_bouton2.ext_ext_image_bouton : format du bouton si click souris dessus.
Un exemple de boutons vous est fourni (acceder_form0.gif,acceder_form1.gif,acceder_form2.gif).
*name_bouton : il s'agit du nom qui sera donné au bouton dans ses attributs NAME, ALT et ID de la balise IMG.
Veillez à donner un nom assez court et SANS ESPACE (évitez également les accentuations si possible).
Chaque bouton d'une même page (si plusieurs formulaires sur la même page) devra bien sûr avoir un nom différent.
4 - Appeler le js de contrôle de page par :
.
Ce js supporte la fonction valid_form(f) dans laquelle vous définirez en Javascript les différents
contrôle à réaliser sur chaque formulaire (plusieurs formulaires possibles).
Vous pourrez donc créer un ctrl_pageX.js spécifique par page (vous pouvez changer le nom du js). Ce js
devra OBLIGATOIREMENT supporter la fonction valid_form(f) telle que défini (voir ctrl_pageX.js donné en exemple
pour plus de détail.
*/
var bouton_submit = new Array();
var ie = (document.all)? true:false;
var ns4 = (document.layers)? true:false;
var ns6 = (document.getElementById)? true:false;
var posX = 0;
var posY = 0;
function ScanMouseEvent(e) {
if (document.all || document.getElementById) {
document.onmousedown=getMousePos;
document.onmousemove=getMousePos;
}
if (document.layers) {
window.captureEvents(Event.MOUSEDOWN);window.onMouseDown=getMousePos;
window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
}
}
function getMousePos(e)
{
if (document.all)
{
posX = 0;
posY = 20;
}
else
{
posX = e.clientX;
posY = e.clientY;
}
}
ScanMouseEvent();
function create_error_layer(path_images,left,top)
{
/*Création de la LAYER pour affichage des erreurs du formulaire*/
//VARIABLE DE DESIGN PARAMETRABLE
var position = 'absolute'; //Position absolute ou relative de la LAYER
var width = '380'; //Largeur en px de la LAYER
var bg_color = '#FFFFCC'; //Couleur de fond de la LAYER
var bdr = '2'; //Taille de la bordure de la LAYER
var bdr_color = '#0000FF'; //Couleur de la bordure
var bandeau_color = '#FF0000'; //Couleur du bandeau supérieur de la boite
var bandeau_texte = 'ERREUR'; //Texte du bandeau supérieur de la boite
var bandeau_texte_color = '#FFFFFF'; //Couleur du texte de bandeau
//Préchargement des images du bouton de boite d'erreur de saisie
bouton_submit = new Array();
bouton_error = new Array();
error_msg = '';
for(i=0;i<=1;i++)
{
bouton_error[i] = new Image();
bouton_error[i].src = path_images+'fermer'+i+'.gif';
}
if ((ns6) || (ie))
{
document.write('
');
}
else if (ns4)
{
document.write('
');
}
document.write('');
document.write('');
document.write('');
document.write('');
document.write('| ');
document.write(''+bandeau_texte+'');
document.write(' | ');
document.write(' ');
document.write('');
document.write('
');
document.write(' | ');
document.write(' ');
document.write('');
document.write(' | ');
document.write(' ');
document.write(' | ');
document.write('
');
document.write('
');
if ((ns6) || (ie))
{
document.write('';
valid_form(f);
}
}
function add_err_msg(msg)
{
//Cette fonction assure l'insertion des messages d'erreurs dans la boite
error_msg += '- '+msg+'
';
}
function open_layer_error(e)
{
//Cette fonction assure l'affichage de la boite
document.getElementById('msg_error').innerHTML = error_msg+'
';
if(ie)
{
document.getElementById('error_layer').style.left = event.clientX+'px';
document.getElementById('error_layer').style.top = event.clientY+'px';
}
else if(ns4)
{
document.captureEvents(Event.MOUSEDOWN);
document.getElementById('error_layer').style.left = e.pageX-100+'px';
document.getElementById('error_layer').style.top = e.pageY-50+'px';
}
else if(ns6)
{
document.getElementById('error_layer').style.top = posY+'px';
document.getElementById('error_layer').style.left = posX+'px';
}
document.getElementById('error_layer').style.visibility = 'visible';
}
function move_error_layer(e)
{
/*Cette fonction permet de déplacer la boite en cliquant dans le bandeau du haut
de la boite et en la traînant (Drag&Drop) avec la souris.
Elle utilise les fonctions doDrag et endDrag placé dessous*/
if (ie)
{
//Récupération de la position de la souris
window.lastX=event.clientX;
window.lastY=event.clientY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
document.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
document.onmouseup=endDrag;
}
else if (ns4)
{
document.captureEvents(Event.MOUSEDOWN);
//Récupération de la position de la souris
window.lastX=e.pageX;
window.lastY=e.pageY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
document.captureEvents(Event.MOUSEUP)
document.onmouseup=endDrag;
}
else if (ns6)
{
//Récupération de la position de la souris
getMousePos;
window.lastX=posX;
window.lastY=posY;
// lance doDrag tant que l'on appuie sur le bouton de la souris en la bougeant
window.onmousemove=doDrag;
// lance endDrag quand on relache le bouton de la souris
window.onmouseup=endDrag;
}
}
function doDrag(e) {
//Déplacement de la boite
if (ie)
{
// Calcul de l'écart de position de la souris
var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(document.getElementById('error_layer').style.left)+difX;
var newY1 = parseInt(document.getElementById('error_layer').style.top)+difY;
// Assignation des nouvelles coordonnées au div
document.getElementById('error_layer').style.left=newX1+"px";
document.getElementById('error_layer').style.top=newY1+"px";
//Assignation de l'anciènne position de la souris
window.lastX=event.clientX;
window.lastY=event.clientY;
}
else if (ns4)
{
// Calcul de l'écart de position de la souris
var difX=e.pageX-window.lastX;
var difY=e.pageY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(document.layers.error_layer.left)+difX;
var newY1 = parseInt(document.layers.error_layer.top)+difY;
// Assignation des nouvelles coordonnées au div
document.layers.error_layer.left=newX1;
document.layers.error_layer.top=newY1;
//Assignation de l'anciènne position de la souris
window.lastX=e.pageX;
window.lastY=e.pageY;
}
else if (ns6)
{
// Calcul de l'écart de position de la souris
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
//Récupération de la position du div et ajout de l'écart de position de la souris
var newX1 = parseInt(document.getElementById("error_layer").style.left)+difX;
var newY1 = parseInt(document.getElementById("error_layer").style.top)+difY;
// Assignation des nouvelles coordonnées au div
document.getElementById("error_layer").style.left=newX1+"px";
document.getElementById("error_layer").style.top=newY1+"px";
//Assignation de l'anciènne position de la souris
window.lastX=e.clientX;
window.lastY=e.clientY;
}
}
function endDrag(e)
{
//Fin de déplacement au relachement de la souris
if (ie || ns4)
{
//Réinitialisation du onmousemove
document.onmousemove=null;
}
else if (ns6)
{
//Réinitialisation du onmousemove
window.onmousemove=null;
}
}
function close_error_layer(e)
{
/*Cette fonction ferme la boite d'indication d'erreur de saisie des formulaires (error_layer)
et gére l'affichage du bouton FERMER en fonction du passage de la souris
*/
error_msg = '';
if(e!=2) //Si on passe sur le bouton avec la souris
{
document.images['bouton_fermer'].src = bouton_error[e].src;
}
else
{
document.getElementById('error_layer').style.visibility = 'hidden';
}
}
function create_bouton_submit(form,path_images,nom_image_bouton,ext_image_bouton,name_bouton)
{
//Créationdu bouton Submit graphique personnalisé
//Préchargement des images du bouton de formulaire
nom_bouton_submit = path_images+nom_image_bouton+'0'+ext_image_bouton;
nom_bouton = name_bouton;
bouton_submit[form] = new Array();
for(i=0;i<=2;i++)
{
bouton_submit[form][i] = new Image();
bouton_submit[form][i].src = path_images+nom_image_bouton+i+ext_image_bouton;
}
document.write('
');
}
function ctrl_mail(mail)
{
//Cette fonction vérifie que le format du mail communiqué est vraisemblable
var er_ponc = false; //Pointeur d'erreur sur caractères interdits
var ponc = ",/<>?`';/#£%^&*():=|[]{}éàèëê€âùüçµ$" + '"' + "\\\n\t"; //Liste de caractères interdits
var error = false; //Variable locale d'erreur
if (mail.length > 0)
{
if (mail.indexOf('@') == -1)
{
error = true;
add_err_msg("Le champ [Mail] est invalide. @ est requis dans une adresse mail.");
}
else
{
for (var i = 0; i < ponc.length; i++)
{
if (mail.indexOf(ponc.charAt(i)) != -1)
{
er_ponc=true;
break;
}
}
if (er_ponc == true)
{
error = true;
add_err_msg("Les ponctuations et caractères spéciaux sont interdits dans le champ [Mail].");
}
}
}
else
{
error = true;
add_err_msg("Le champ [Mail] est vide.");
}
return error;
}
function ctrl_tel(champ, obl)
{
//Cette fonction vérifie que le format du téléphone est bien du type xx.xx.xx.xx.xx
//obl indique si le numéro est obligatoire (=1) ou optionnel (=2)
var error = false; //Variable d'erreur locale
zz = champ.substring(0,2);
ab = champ.substring(3,5);
pq = champ.substring(6,8);
mc = champ.substring(9,11);
du = champ.substring(12,14);
s1 = champ.substring(2,3);
s2 = champ.substring(5,6);
s3 = champ.substring(8,9);
s4 = champ.substring(11,12);
if (isNaN(zz) || isNaN(ab) || isNaN(pq) || isNaN(mc) || isNaN(du) || s1 != '.' || s2 != '.' || s3 != '.' || s4 != '.')
{
error = true;
add_err_msg("Le format du champ [Téléphone] n'est pas valide. Format 00.00.00.00.00 requis.");
}
else
{
if (zz+ab+pq+mc+du == 0 && obl == '1')
{
error = true;
add_err_msg("Le champ [Téléphone] est obligatoire.");
}
else
{
if (champ.length < 14)
{
error = true;
add_err_msg("Le format du champ [Téléphone] n'est pas valide. Format 00.00.00.00.00 requis.");
}
}
}
return error;
}
function ctrl_mdp(mdp,obl,len)
{
//Cette fonction vérifie que le format du mdp communiqué est compatible
var er_ponc = false; //Pointeur d'erreur sur caractères interdits
var ponc = ",/<>?`';/#£%^&*():=|[]{}€µ$" + '"' + "\\\n\t"; //Liste de caractères interdits
var error = false; //Variable locale d'erreur
if (mdp.length > 0)
{
if(mdp.length < len)
{
error = true;
add_err_msg("Le champ [Mot de Passe] est invalide. "+len+" caractères sont requis au minimum.");
}
else
{
for (var i = 0; i < ponc.length; i++)
{
if (mdp.indexOf(ponc.charAt(i)) != -1)
{
er_ponc=true;
break;
}
}
if (er_ponc == true)
{
error = true;
add_err_msg("Les ponctuations et caractères spéciaux suivants : "+ponc+" sont interdits dans le champ [Mot de passe].");
}
}
}
else
{
if(obl == 1)
{
error = true;
add_err_msg("Le champ [Mot de passe] est obligatoire.");
}
}
return error;
}
function ctrl_ident(ident,obl,len)
{
//Cette fonction vérifie que le format de l'identifiant communiqué est compatible
var er_ponc = false; //Pointeur d'erreur sur caractères interdits
var ponc = ",/<>?`';/#£%^&*():=|[]{}€µ$" + '"' + "\\\n\t"; //Liste de caractères interdits
var error = false; //Variable locale d'erreur
if (ident.length > 0)
{
if(ident.length < len)
{
error = true;
add_err_msg("Le champ [Identifiant] est invalide. "+len+" caractères sont requis au minimum.");
}
else
{
for (var i = 0; i < ponc.length; i++)
{
if (ident.indexOf(ponc.charAt(i)) != -1)
{
er_ponc=true;
break;
}
}
if (er_ponc == true)
{
error = true;
add_err_msg("Les ponctuations et caractères spéciaux suivants : "+ponc+" sont interdits dans le champ [Identifiant].");
}
}
}
else
{
if(obl == 1)
{
error = true;
add_err_msg("Le champ [Identifiant] est obligatoire.");
}
}
return error;
}
//-->
