// JavaScript Document /*----------------------------------------------------------------------------------------------------------------------* * * * VALIDATION DE FORMULAIRES * * * *----------------------------------------------------------------------------------------------------------------------*/ /* Ce module valide les champs (input, textarea ou select) d'un ou de plusieurs formulaires d'une page html. Chaque champ à valider doit être déclaré avec l'un des noms de classe suivants : "ident", "passe", "conf", "nom", "tel", "@", "cp" A chacune de ces classes correspond une ou plusieurs expressions rationnelles de filtrage, ainsi que le ou les messages de rejet correspondant. Il permet l'affichage, dans la page ou dans une boîte d'alerte, d'un message global listant les raisons des rejets, ainsi que l'affichage pour chaque champ non valide du motif de rejet qui le concerne et/ou d'un symbole 'ok' ou 'rejet' Principes de validation : - Les champs dont le nom est dans la liste des champs obligatoires seront invalides si : . champ texte (text et textarea) : est égal à une chaîne vide . cases à cocher ou les boutons radio (checkbox et radio) : sont tous décochés . listes déroulantes (select) : l'option sélectionnée est celle qui correspond à la valeur 0, null ou chaîne vide - Les champs des classes listées ci-dessus doivent correspondre au Filtre imposé par l'expression rationelle correspondante - Le champ de classe 'conf' (confirmation de mot de passe) doit être identique au champ de classe 'passe'. /*----------------------------------------------- MISE EN OEUVRE --------------------------------------------------- Dans la page html du formulaire : 1- Dans l'entête (head), faire référence à ce script : 2- Dans la balise 'body', appeler dans l'attribut 'onload' la fonction d'initialisation autant de fois qu'il y a de formulaires à valider : Un formulaire : Plusieurs formulaires : où : idForm : l'id du formulaire à valider. Exemple : 'monFormulaire' surSaisie : chaîne composée de lettres indiquant les effets désirés lors de la saisie de chaque champ : "" : aucun effet, "s" : affichage d'un symbole 'ok' ou 'rejet' à proximité du champ "t" : affichage du texte expliquant le rejet à proximité du champ Exemple : "st" : affichage du symbole et du texte (dans cet ordre) surSoumis : chaine composée de lettres indiquant les effets désirés lors de la soumission du formulaire : "" : aucun effet "s" : affichage d'un symbole ok ou rejet à proximité de chaque champ "t" : affichage du texte expliquant le rejet à proximité de chaque champ "b" : affichage les messages de rejet en bloc "a" : affichage les messages de rejet dans une fenêtre d'alerte Exemple "sa" : affichage du symbole 'ok' ou 'rejet' en face de chaque champ, et boîte d'alerte avec l'ensemble des messages. listeChampsOblig : liste des champs obligatoires. Exemple : 'nom', 'prenom', 'courriel', 'tel', 'adresse', 'cp', 'commune' Exemple : 3- Affecter à chaque champ de saisie à valider - une classe (attribut 'class') parmi celles ci-dessus, qui conditionne le Filtre de saisie. - un nom (attribut 'name') si sa saisie est obligatoire Exemple : 4- S'il y a un effet 's' ou 't' à la saisie ou à la soumission, créer des zones de messages (par exemple span, p, td, ..) à proximité de chacun des champs de saisie. Ces zones doivent avoir comme id : "msg_[nom du formulaire]_[nom du champ]". Exemple : 5- Modifier si besoin est les expressions rationnelles et les messages correspondant à chacune des classes de validation. Voir ci-dessous. /*------------------------------------------------------------------------------------------------------------------------------------------*/ // Quelques Filtres usuels (Na = non accentué) //PasLettre = /[\x00-\x40\x5B-\x60\x7B-\xBF]/; //LettresNa = /^[\x41-\x5A\x61-\x7A]+$/; //LettresNaChiffres = /^[\x30-\x39\x41-\x5A\x61-\x7A]+$/; //Lettres = /^[\x41-\x5A\x61-\x7A\xC0-\xD6\xD8-\xF6\xF8-\xFF]+$/; //LettresChiffres = /^[\x30-\x39\x41-\x5A\x61-\x7A\xC0-\xD6\xD8-\xF6\xF8-\xFF]+$/; //LettrePuisLettresChiffres = /^[\x41-\x5A\x61-\x7A\xC0-\xFF]([\x30-\x39\x41-\x5A\x61-\x7A\xC0-\xFF]|\d)*$/; //Initialisation des Filtres et des textes de messages var Textes; var Filtres; function ini_filtres() { Textes = new Array(); Filtres = new Array(); Textes['ident'] = new Array(); Filtres['ident'] = new Array(); Textes['passe'] = new Array(); Filtres['passe'] = new Array(); Textes['nom'] = new Array(); Filtres['nom'] = new Array(); Textes['tel'] = new Array(); Filtres['tel'] = new Array(); Textes['@'] = new Array(); Filtres['@'] = new Array(); Textes['cp'] = new Array(); Filtres['cp'] = new Array(); /*------------------------------------------- MODIFIER CI-DESSOUS LES FILTRES ET LES MESSAGES ---------------------------------------------------*/ // Identifiant Textes['ident'][0] = "Seuls sont acceptés les lettres et chiffres. Le premier caractère doit être une lettre."; Filtres['ident'][0] = /^[\x41-\x5A\x61-\x7A\xC0-\xFF]([\x30-\x39\x41-\x5A\x61-\x7A\xC0-\xFF]|\d)*$/; // Mot de passe Textes['passe'][0] = "Seuls sont acceptés les lettres non accentuées et les chiffres."; Filtres['passe'][0] = /^[a-zA-Z0-9]*$/; Textes['passe'][1] = "Le mot de passe doit comporter entre 4 et 12 caractères."; Filtres['passe'][1] = /^.{4,12}$/; // Nom, prénom Textes['nom'][0] = "Les seuls symboles autorisés sont : espace, apostrophe, trait d'union et point."; Filtres['nom'][0] = /^[\x30-\x39\x41-\x5A\x61-\x7A\xC0-\xD6\xD8-\xF6\xF8-\xFF '\-\.]+$/; Textes['nom'][1] = "Ce champ doit commencer par une lettre."; Filtres['nom'][1] = /^[\x41-\x5A\x61-\x7A\xC0-\xD6\xD8-\xF6\xF8-\xFF]/; // Numéro de téléphone Textes['tel'][0] = "Seuls sont acceptés le signe + (en tête), les parenthèses et l'espace simple (hors parenthèses)."; Filtres['tel'][0] = /^\+?( ?(\(\d+\)|\d+))+$/; Textes['tel'][1] = "Les numéros nationaux ont 10 chiffres, les internationaux commencent par +."; Filtres['tel'][1] = /^\+|^.{10}$/; // Adresse électronique Textes['@'][0] = "Champ non valide"; Filtres['@'][0] = /^[\w][\w\.-]*@[\w\.-]+\.[\w]+$/; //Code postal Textes['cp'][0] = "Le code postal doit comporter 5 chiffres sans espace."; Filtres['cp'][0] = /^\d{5}$/; /*------------------------------------------------------------------------------------------------------------------------------------------*/ } var ListesOblig; var OnChanges; var OnSubmits; var Passe; function ini_form() { var args, IdForm, TypeAlerte, ListeOblig, Formulaire, Champs, i; args = ini_form.arguments; IdForm = args[0]; OnChange = args[1]; OnSubmit = args[2]; ListeOblig = new Array(); for(i=0; i"; Texte += "" + Message[nom] + ""; Texte += ""; } } Texte += ""; ChampMsg = document.getElementById('msg_'+ IdForm + '_soumis'); ChampMsg.innerHTML = Texte; break; } } } return Valide; } /* Validation d'un champ Retourne vrai si valide. Si invalide ou manquant, ajoute une ligne de message et retourne faux. Champ : L'objet champ concerné Message : Liste des messages retournés Oblig : Booléen indiquant si le champ doit être rempli. */ function validateur(Champ, Message, Oblig){ var Classe, Filtre, i, n, res; Message[Champ.name] = "ce champ ne peut pas être vide"; if (ChampManquant(Champ, Message, Oblig)) {return false;} Classe = Champ.className; n = Filtres[Classe].length; for (i=0; i