begin process at 2012 02 06 02:09:23
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > FUNCTIONS DE CONTROLE DE SAISIE D'UN FORMULAIRE.

FUNCTIONS DE CONTROLE DE SAISIE D'UN FORMULAIRE.


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Initié Date de création :08/10/2004 Date de mise à jour :08/02/2005 15:25:02 Vu / téléchargé :31 759 / 1 181

Auteur : misterdarth

Ecrire un message privé
Commentaire sur cette source (15)
Ajouter un commentaire et/ou une note

 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

  • <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>
<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.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

08 octobre 2004 00:04:54 :
08 octobre 2004 12:52:27 :
- Correction de commentaires dans le source - Ajout du zip
07 février 2005 16:41:11 :
Correction dans l'encadrée présentation du code. J'avais inversé X et Y dans les explications.
08 février 2005 15:25:03 :
Utilisation de .lowercase(); pour alleger le code et ajout d'une précision sur le cas "Texte". Texte correspond en fait à de l'alphanumérique.

 Sources du même auteur

Source avec une capture COMBOBOX DE TAILLE INFÈRIEUR À SON CONTENU

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

Commentaires et avis

Commentaire de chmel le 11/10/2004 14:05:08

Pour économiser les tests sur les majusccules, tu aurais pu mettre tout en minuscules d'entrée :

    Nom_Element = Nom_Element.toLowerCase();

Commentaire de misterdarth le 11/10/2004 14:41:38

Effectivement !
Je vais modifier ça dés que j'ai un peu de temps.

Commentaire de chmel le 11/10/2004 14:54:30

Ceci dit, code utile et bien fait, bravo, continu

Commentaire de sKanD le 25/10/2004 14:20:13

Bien vu !
Un petit exemple pour couronner le tout, stp ?

Commentaire de titouan74 le 07/02/2005 16:29:42

Bonjour,
Merci pour ce code. J'ai néanmoins besoin d'avoir une confirmation pour lever une ambiguité. Il faut bien lire : XY_[Nom_de_l'élément]
X = O,o ou F,f ( Obligatoire ou Facultatif )
Y= Type d'element

et non  
X = Type d'element
Y = O,o ou F,f ( Obligatoire ou Facultatif )
comme cela apparaît sur le descriptif ?

Commentaire de misterdarth le 07/02/2005 16:36:20

Bonjour Titouan74,

Effectivement, j'ai inversé les correspondances XY. Je corrige ça tout de suite ... il faudrait que je prenne le temps d'optimiser le code aussi.

Commentaire de titouan74 le 08/02/2005 14:35:25

Bonjour misterdarth,
Il me semble qu'il manque le contrôle d'un champ de type texte. Tu l'annonces dans les spécifications mais on ne le retrouve pas dans le code.
Merci d'avance,

Commentaire de misterdarth le 08/02/2005 15:27:36

Bonjour Titouan,
Je pars du principe que le texte, c'est de l'alphanumérique.
En effet, si je devais vérifier qu'il n'y a aucun chiffre dans le champ, il me faudrait parcourir chaque caractere et faire un test "IsNan" ... à moins qu'une fonction JS soit equivalente à IsNan mais pour du texte.

Commentaire de SergioL le 07/08/2005 01:13:44

Bravo pour ce code que je recherchais depuis un bon moment !

J'ai juste une petite contribution à apporter; 2 nouveaux types d'éléments
m,M ; s,S (Numérique formaté, Texte formaté) qui me manquaient dans mes contrôles;
(ex; code postal sur 5n)

   // test longueur de chaine de caractères numériques
    if (Nom_Lowercase.substring(1,2) == "m")
   {
      if (isNaN(Champ.value))
      {
        alert("Le champ suivant est numérique : " + Champ.id );
        Champ.focus();
        return false;
      }
    }
   if ((Nom_Lowercase.substring(1,2) == "m")   && (Champ.value != ""))
   {
     if (Champ.value.length != Champ.size)
      {
        alert("La taille est incorrecte pour le champ : " + Champ.id );
        Champ.focus();
        return false;
      }
   }
   // test longueur de chaine de caractères alphanumériques
   if ((Nom_Lowercase.substring(1,2) == "s")   && (Champ.value != ""))
   {
     if (Champ.value.length != Champ.size)
      {
        alert("La taille est incorrecte pour le champ : " + Champ.id );
        Champ.focus();
        return false;
      }
   }

Commentaire de medicair le 04/01/2006 18:02:38

pouvez-vous m'aider ?
donc si j'ai bien compris... et par exemple...
je nomme un groupe radio de cette facon name="or_nomradio" ?
et dans onsubmit="Verif_Forms(toto)" ?
je suis novice...
merci d'avance..

Commentaire de misterdarth le 07/01/2006 22:57:19

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

Commentaire de lassad_haddaji le 18/09/2007 18:14:44

merci pour tt les membres et sur tt pour misterdarth

Commentaire de ibtissame87 le 20/04/2010 15:15:44

SVP comment utilser ce code ??

que devrai-je ajouter ou ecrire dans ma page JSP pour que ca fonctionne???

Commentaire de misterdarth le 20/04/2010 22:56:54

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...

Commentaire de ibtissame87 le 21/04/2010 11:57:40

D'accord

Merci énormément

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,571 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales