Functions de controle de saisie d'un formulaire.

Soyez le premier à donner votre avis sur cette source.

Vue 41 838 fois - Téléchargée 1 644 fois

Description

Cette function, en javascript, permet de parcourir tous les éléments d'un formulaire et de vérifier, selon certaines regles, si l'utilisateur n'a pas mis n'importe quoi :)
Le seul impératif est de nommer ses éléments selon une certaine norme :
XY_[Nom_de_l'élément]
X = O,o ou F,f ( Obligatoire ou Facultatif )
Y = Type d'element
c,C ; d,D ; n,N ; T,t ; r,R ; b,B = Combobox; Date; Numérique; Texte; Radio; CheckBox

Les fonctions suivantes servent à vérifier la date et à enlever le "XY_" devant les noms des éléments.

Source / Exemple :


<script LANGUAGE="JavaScript">

/*  
  Type   : c,C ; d,D ; n,N ; T,t ; r,R ; b,B (Combobox, Date, Numérique, Texte ( alphanumérique ), Radio, CheckBox)
  Option : o,O ou f,F (Obligatoire ou Facultatif)

  • /
function Verif_Forms(MonForm) { var ok; var NbBox; var NbRadio; var NbElements = MonForm.elements.length; // Boucle tous les éléments du formulaire for (var l = 0; l < NbElements; l++) { var Nom_Element = MonForm.elements[l].name; var Nom_Lowercase = Nom_Element.toLowerCase(); var Champ = MonForm.elements[l]; // Verifie que l'element n'est pas vide si il est obligatoire if (Nom_Lowercase.substring(0,1) == "o" && Champ.value == "") { alert("Le champ suivant est obligatoire : " + Champ.id ); Champ.focus(); return false; } // Verifie que l'element contient bien une date même si ce champ n'est pas obligatoire à remplir if (Nom_Lowercase.substring(1,2) == "d") { // Appel à la fonction Control_Date if (! Control_Date(Champ.value)) { alert("Format de date invalide pour le champ " + Champ.id + ".\nLe format de date valide est JJ/MM/AAAA" ); Champ.focus(); return false; } } // Verifie que l'element ne contient que des chiffres même si ce champ n'est pas obligatoire à remplir if (Nom_Lowercase.substring(1,2) == "n") { if (isNaN(Champ.value)) { alert("Le champ suivant est numérique : " + Champ.id ); Champ.focus(); return false; } } // Verifie que l'utilisateur a fait un choix dans la combobox // ATTENTION : // Implique la déclaration d'une option dans le select avec la valeur -1 ** if (Nom_Lowercase.substring(0,1) == "o" && Nom_Lowercase.substring(1,2) == "c" ) { if (Champ.value == -1) { alert("Le champ suivant est obligatoire : " + Champ.id); Champ.focus(); return false; } } // Controle qu'un boutton radio a été selectionné if (Nom_Lowercase.substring(0,1) == "o" && Nom_Lowercase.substring(1,2) == "r") { ok = false; // getElementsByName([Nom_element]).length renvoie le nombre d'element du meme nom // Merci bultez NbRadio = document.getElementsByName(Nom_Element).length; for (var k = 0; k < NbRadio; k++) { if (document.getElementsByName(Nom_Element)[k].checked == true) { ok = true k = document.getElementsByName(Nom_Element).length; } } if (ok == false) { alert("Le champ suivant est obligatoire : " + Champ.id); Champ.focus(); return false; } } // Meme chose mais avec des CheckBox if (Nom_Lowercase.substring(0,1) == "o" && Nom_Lowercase.substring(1,2) == "b" ) { ok = false; NbBox = document.getElementsByName(Nom_Element).length; for (var k = 0; k < NbBox; k++) { if (document.getElementsByName(Nom_Element)[k].checked == true) { ok = true k = document.getElementsByName(Nom_Element).length; } } if (ok == false) { alert("Le champ suivant est obligatoire : " + Champ.id); Champ.focus(); return false; } } } return true; } // Si l'element est nul, renvoie True ( "oui, l'element est vide" ) // Sinon, vérifie la date function Control_Date (MaDate) { var strTemporaire = MaDate; if (strTemporaire == '') return true; strTemporaire = formatDate(strTemporaire); if (strTemporaire == null) return false; return true; } // Enleve les "XY_" devant le [Nom_de_l'element] function Format_Nom (NomChamp) { var position var NomTemp = NomChamp position = NomTemp.indexOf("_"); NomTemp = NomTemp.substr(position,NomTemp.length) var reg = new RegExp("_","gi"); NomTemp = NomTemp.replace(reg," "); return NomTemp; } // Function qui format une date et vérifie si elle n'est pas farfelue // Cette fonction n'est pas de moi. Je sais juste qu'elle vient d'un Cédric // Merci à lui function formatDate(valeur) { var JJ;var MM;var AAAA; isMatch = false; var tabDate // L'ordre de lecture des expressions est important var expReg1 = /(\d{2})(\d{2})(\d{4}|\d{2})/; var expReg2 = /(\d{2}|\d)\/(\d{2}|\d)\/(\d{4}|\d{2})/; // tabDate={JJMMAAAA ou JJMMAA} tabDate = valeur.match(expReg1); if ((tabDate != null) && (tabDate[0] == valeur)) { isMatch = true; JJ = tabDate[1]; MM = tabDate[2]; if (tabDate[3].length == 2 ) AAAA = '20' + tabDate[3] ; else AAAA = tabDate[3]; } // tabDate={JJ/MM/AAAA ou JJ/MM/AA} tabDate = valeur.match(expReg2); if ((tabDate != null) && (tabDate[0] == valeur)) { isMatch = true; if (tabDate[1].length == 1 ) JJ = '0' + tabDate[1]; else JJ = tabDate[1]; if (tabDate[2].length == 1 ) MM = '0' + tabDate[2]; else MM = tabDate[2]; if (tabDate[3].length == 2 ) AAAA = '20' + tabDate[3] ; else AAAA = tabDate[3]; } var objDate=new Date(AAAA, (MM - 1) ,JJ); if ((JJ=='32') && (MM='13') && isMatch) { //return JJ + '/' + MM + '/' + AAAA; return objDate; } if ( (!isMatch) || (objDate.getDate() != JJ) || ((objDate.getMonth()+1) != MM )) { return null; } //return JJ + '/' + MM + '/' + AAAA; return objDate; } </script>

Conclusion :


"Champ.id" est la valeur "id" donnée à l'element dans le code html
Dans le cas d'un champ Texte, je pars du principe que ça sera de l'alphanumérique ( lettre + chiffre ). Je ne fais donc que le test d'obligation ou non de saisie du champ.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mardi 23 mars 2010
Statut
Membre
Dernière intervention
21 avril 2010

D'accord

Merci énormément
Messages postés
14
Date d'inscription
vendredi 28 février 2003
Statut
Membre
Dernière intervention
10 novembre 2004

ibtissame87, tu parles de JSP. Je pense qu'il existe désormais des framework java qui disposent de ce genre de tests de saisie très classiques. Regarde déjà de ce côté là.

Autrement, il te faut placer le code javascript dans un fichier et le déclarer dans ta page. Pour ce qui est de l'utilisation des fonctions, c'est expliqué dans ma réponse à Medicair (commentaire du 07/01/2006). Cela dit, il est vrai qu'il manque un exemple à ma source...
Messages postés
2
Date d'inscription
mardi 23 mars 2010
Statut
Membre
Dernière intervention
21 avril 2010

SVP comment utilser ce code ??

que devrai-je ajouter ou ecrire dans ma page JSP pour que ca fonctionne???
Messages postés
142
Date d'inscription
mardi 24 avril 2007
Statut
Membre
Dernière intervention
6 avril 2012

merci pour tt les membres et sur tt pour misterdarth
Messages postés
14
Date d'inscription
vendredi 28 février 2003
Statut
Membre
Dernière intervention
10 novembre 2004

Bonsoir Medicair,
La fonction Verif_Forms renvoie un booléen ("vrai" ou "faux"). Pour préciser cela dans ton appel de fonction il vaut mieux mettre :
onsubmit="return Verif_Forms(toto)"
où "toto" est le nom de ton formulaire (déclaré par <form name="toto> <!-- Code de ta page --> </form>)
Cordialement,
Misterdarth
Afficher les 15 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.